How can I detect keydown or keypress event in angular js

Question

I m trying to get the value of a mobile number textbox to validate its input value using angular js  I m a newbie in using angular js and not so sure how to implement those events and put some javascript to validate or manipulate the form inputs on my html code   This is my HTML        lt div gt           lt label for  mobile number  gt Mobile Number lt  label gt           lt input type  text  id  mobile number  placeholder   639178983214  required            ngcontroller  RegisterDataController  ng-keydown  keydown  gt       lt  div gt     And my controller       function RegisterDataController  scope   element           console log  register data controller           console log  element           scope keydown   function keyEvent            console log  keydown -  keyEvent                     I m not sure how to use the keydown event in angular js  I also searched how to properly use it  And can i validate my inputs on the directives  Or should I use a controller like what I ve done to use the events like keydown or keypress

User · Answer

You can checkout Angular UI   http   angular-ui github io ui-utils  which provide details event handle callback function for detecting keydown keyup keypress   also Enter key  backspace key  alter key  control key    lt textarea ui-keydown   27  keydownCallback  event     gt  lt  textarea gt   lt textarea ui-keypress   13  keypressCallback  event     gt  lt  textarea gt   lt textarea ui-keydown    enter alt-space   keypressCallback  event     gt   lt  textarea gt   lt textarea ui-keyup    enter   keypressCallback  event     gt   lt  textarea gt

User · Answer

Update  ngKeypress  ngKeydown and ngKeyup are now part of AngularJS   lt  -- you can  for example  specify an expression to evaluate -- gt   lt input ng-keypress  quot count   count   1 quot  ng-init  quot count 0 quot  gt    lt  -- or call a controller directive method and pass  event as parameter       With access to  event you can now do stuff like       finding which key was pressed -- gt   lt input ng-keypress  quot changed  event  quot  gt   Read more here  https   docs angularjs org api ng directive ngKeypress https   docs angularjs org api ng directive ngKeydown https   docs angularjs org api ng directive ngKeyup Earlier solutions  Solution 1  Use ng-change with ng-model  lt input type  quot text quot  placeholder  quot  639178983214 quot  ng-model  quot mobileNumber quot   ng-controller  quot RegisterDataController quot  ng-change  quot keydown   quot  gt   JS  function RegisterDataController  scope               scope keydown   function                validate  scope mobileNumber here            Solution 2  Use  watch  lt input type  quot text quot  placeholder  quot  639178983214 quot  ng-model  quot mobileNumber quot   ng-controller  quot RegisterDataController quot  gt        JS   scope  watch  quot mobileNumber quot   function newValue  oldValue           change noticed

User · Answer

You were on the right track with your  ng-keydown  attribute on the input  but you missed a simple step   Just because you put the ng-keydown attribute there  doesn t mean angular knows what to do with it   That s where  directives  come into play   You used the attribute correctly  but you now need to write a directive that will tell angular what to do when it sees that attribute on an html element   The following is an example of how you would do that   We ll rename the directive from ng-keydown to on-keydown  to avoid breaking the  best practice  found here    var mod   angular module  mydirectives    mod directive  onKeydown   function         return           restrict   A           link  function scope  elem  attrs                    this next line will convert the string                 function name into an actual function              var functionToCall   scope  eval attrs ngKeydown                elem on  keydown   function e                        on the keydown event  call my function                      and pass it the keycode of the key                      that was pressed                      ex  if ENTER was pressed  e which    13                   functionToCall e which                                           The directive simple tells angular that when it sees an HTML attribute called  ng-keydown   it should listen to the element that has that attribute and call whatever function is passed to it   In the html you would have the following    lt input type  text  on-keydown  onKeydown  gt    And then in your controller  just like you  already had   you would add a function to your controller s scope that is called  onKeydown   like so    scope onKeydown   function keycode          do something with the keycode     Hopefully  that helps either you or someone else who wants to know

User · Answer

JavaScript code using ng-controller    scope checkkey   function  event      alert event keyCode      this will show the ASCII value of the key pressed      In HTML    lt input type  text  ng-keypress  checkkey  event     gt    You can now place your checks and other conditions using the keyCode method

[html] How can I detect keydown or keypress event in angular.js?

Examples related to html

Examples related to twitter-bootstrap

Examples related to angularjs

Examples related to angularjs-directive