Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is my event handler always one keystroke behind, and how does $timeout fix this?

I'm totally confused as to why my keypress event handler is always one keystroke behind. http://plnkr.co/edit/w3FAXGd5zjrktO6DgOpD?p=preview

<body ng-controller="myController">
  <form>
    <input ng-keypress="handleKeypress($event)" />
  </form>
</body>

Controller:

myapp.controller('myController', function($scope, $timeout){

    $scope.handleKeypress = function(ev){

      console.log(ev.target.value); //always one keystroke behind

      //$timeout(function(){console.log(ev.target.value);}); //works!

    };
}); 

Why is $timeout necessary and why/how does it work? (A newbie-friendly answer is preferable)

I understand that with the keypress event the character hasn't yet been inserted into the DOM, but I'm confused because the Hello World example at angularjs.org responds before a key is released. Their example doesn't use a custom event handler, but clearly Angular is updating the model before the keyup event, so I'd like understand more about doing this in a custom event handler.

idursun's answer points out that event.which is available on keypress, and I thought Angular might be using String.fromCharCode(), but I don't see anything in the Angular source to this effect.

like image 260
KnewB Avatar asked Mar 21 '23 22:03

KnewB


1 Answers

You should use ng-keyup. Keypress might not always work as expected.

From the jQuery documentation:

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

like image 83
JelteF Avatar answered Apr 26 '23 22:04

JelteF