CODEWITHSUNDEEP
angularjsangular-directive
user2879704
user2879704

Reputation:

Angularjs directive - keydown listener is invoked with delay

I have a directive make-caps applied to an input element. It will convert all chars in the input box to uppercase as the user types it.

Now, the directive has its event listener attached to keydown event. 

link : function(scope, element, attrs){
    element.bind('keydown', function(event){
        //$timeout(function(){
            element[0].value = element[0].value.toUpperCase();
        //});
    })
}

Uppercasing works for all, except that the last character is left out. If user types elle, it will render ELLe. I am able to fix it by wrapping the code inside $timeout block, but i am curious why doesn't the view get updated, when i set element[0].value

Plunker code is here.

Upvotes: 0

Views: 258

Answers (1)

aseferov
aseferov

Reputation: 6393

This is because keydown events are fired before the new character is added to the value of the input. Use keyup

element.bind('keyup', function(event){
    element[0].value = element[0].value.toUpperCase();

})

Upvotes: 3

Related Questions