How to use a keypress event in AngularJS

Question

I want to catch the enter key press event on the textbox below  To make it more clear I am using a ng-repeat to populate the tbody  Here is the HTML     lt td gt  lt input type  number  id  closeqty   index    class  pagination-right closefield       data-ng-model  closeqtymodel  data-ng-change  change  index   required placeholder    item closeMeasure      gt  lt  td gt    This is my module   angular module  components     ngResource       I am using a resource to populate the table and my controller code is   function Ajaxy  scope   resource      controller which has resource to populate the table

User · Answer

This is an extension on the answer from EpokK.

I had the same problem of having to call a scope function when enter is pushed on an input field. However I also wanted to pass the value of the input field to the function specified. This is my solution:

app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
          // Create closure with proper command
          var fn = function(command) {
            var cmd = command;
            return function() {
              scope.$eval(cmd);
            };
          }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));

          // Apply function
          scope.$apply(fn);

          event.preventDefault();
        }
    });
};

});

The use in HTML is as follows:

<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>

Kudos to EpokK for his answer.

User · Answer

html   lt textarea id  messageTxt       rows  5       placeholder  Escriba su mensaje       ng-keypress  keyPressed  event        ng-model  smsData mensaje  gt   lt  textarea gt    controller js   scope keyPressed   function  keyEvent        if  keyEvent keyCode    13            alert  presiono enter            console log  presiono enter

User · Answer

Here is what I figured out when I was building an app with a similar requirement  it doesn t require writing a directive and it s relatively simple to tell what it does    lt input type  text  ng-keypress    event charCode  13  myFunction   return  placeholder  Will Submit on Enter  gt

User · Answer

I think using document bind is a bit more elegant  constructor  scope   document      var that   this     document bind  keydown   function event         scope  apply function          that handleKeyDown event                     To get document to the controller constructor   controller     scope     document   MyCtrl

User · Answer

My simplest approach using just angular build-in directive   ng-keypress  ng-keydown or ng-keyup   Usually  we want add keyboard support for something that already handled by ng-click   for instance    lt a ng-click  action    gt action lt  a gt    Now  let s add keyboard support   trigger by enter key    lt a ng-click  action        ng-keydown   event keyCode     13  amp  amp  action    gt action lt  a gt    by space key    lt a ng-click  action        ng-keydown   event keyCode     32  amp  amp  action    gt action lt  a gt    by space or enter key    lt a ng-click  action        ng-keydown    event keyCode     13     event keyCode     32   amp  amp  action    gt action lt  a gt    if you are in modern browser   lt a ng-click  action        ng-keydown   13  32  includes  event keyCode   amp  amp  action    gt action lt  a gt    More about keyCode  keyCode is deprecated but well supported API  you could use  evevt key in supported browser instead  See more in https   developer mozilla org en-US docs Web API KeyboardEvent key

User · Answer

function angular       use strict   angular module  dragModule          directive  myDraggable      document   function  document        return         link  function scope  element  attr             element bind  keydown keypress   function  event               console log  keydown keypress   event which               if event which     13                    event preventDefault                                                       window angular

User · Answer

I m a bit late    but i found a simpler solution using auto-focus    This could be useful for buttons or other when popping a dialog     lt button auto-focus ng-click  func    gt ok lt  button gt   That should be fine if you want to press the button onSpace or Enter clicks

User · Answer

You can use ng-keydown   myFunction  event   as attribute    lt input ng-keydown  myFunction  event   type  number  gt   myFunction event        if event keyCode    13          13  is the key code for enter            do what you want to do when  enter  is pressed

User · Answer

Some example of code that I did for my project  Basically you add tags to your entity  Imagine you have input text  on entering Tag name you get drop-down menu with preloaded tags to choose from  you navigate with arrows and select with Enter   HTML    AngularJS v1 2 0-rc 3       lt div gt           lt form ng-submit  addTag newTag   gt               lt input id  newTag  ng-model  newTag  type  text  class  form-control  placeholder  Enter new tag                     style  padding-left  10px  width  700px  height  33px  margin-top  10px  margin-bottom  3px   autofocus                    data-toggle  dropdown                     ng-change  preloadTags                       ng-keydown  navigateTags  event   gt               lt div ng-show  preloadedTags length  gt  0  gt                   lt nav class  dropdown  gt                       lt div class  dropdown-menu preloadedTagPanel  gt                           lt div ng-repeat  preloadedTag in preloadedTags                               class  preloadedTagItemPanel                               ng-class  preloadedTag activeTag    preloadedTagItemPanelActive                                      ng-click  selectTag preloadedTag                                tabindex      index     gt                               lt a class  preloadedTagItem                                 ng-class  preloadedTag activeTag    preloadedTagItemActive                                        ng-click  selectTag preloadedTag   gt    preloadedTag label    lt  a gt                           lt  div gt                       lt  div gt                   lt  nav gt               lt  div gt           lt  form gt       lt  div gt    Controller js   scope preloadTags   function          var newTag    scope newTag      if  newTag  amp  amp  newTag trim              newTag   newTag trim   toLowerCase              http                                method   GET                   url   api tag gettags                   dataType   json                   contentType   application json                   mimeType   application json                   params    term   newTag                                       success function  result                     scope preloadedTags   result                   scope preloadedTagsIndex   -1                                       error function  data  status  headers  config                                   else            scope preloadedTags                scope preloadedTagsIndex   -1            function checkIndex index        if  index  gt   scope preloadedTags length - 1            return 0            if  index  lt  0            return  scope preloadedTags length - 1            return index     function removeAllActiveTags         for  var x   0  x  lt   scope preloadedTags length  x              if   scope preloadedTags x  activeTag                 scope preloadedTags x  activeTag   false                      scope navigateTags   function   event        if    scope newTag     scope preloadedTags length    0            return            if   event keyCode    40        down         removeAllActiveTags             scope preloadedTagsIndex   checkIndex  scope preloadedTagsIndex   1            scope preloadedTags  scope preloadedTagsIndex  activeTag   true        else if   event keyCode    38        up         removeAllActiveTags             scope preloadedTagsIndex   checkIndex  scope preloadedTagsIndex - 1            scope preloadedTags  scope preloadedTagsIndex  activeTag   true        else if   event keyCode    13        enter         removeAllActiveTags             scope selectTag  scope preloadedTags  scope preloadedTagsIndex               scope selectTag   function  preloadedTag         scope addTag preloadedTag label        CSS   Bootstrap v2 3 2   preloadedTagPanel       background-color   FFFFFF      display  block      min-width  250px      max-width  700px      border  1px solid  666666      padding-top  0      border-radius  0      preloadedTagItemPanel       background-color   FFFFFF      border-bottom  1px solid  666666      cursor  pointer      preloadedTagItemPanel hover       background-color   666666      preloadedTagItemPanelActive       background-color   666666      preloadedTagItem       display  inline-block      text-decoration  none      margin-left  5px      margin-right  5px      padding-top  5px      padding-bottom  5px      padding-left  20px      padding-right  10px      color   666666  important      font-size  11px      preloadedTagItem hover       background-color   666666      preloadedTagItemActive       background-color   666666      color   FFFFFF  important      dropdown  preloadedTagItemPanel last-child       border-bottom  0

User · Answer

An alternative is to use standard directive ng-keypress  myFunct  event    Then in your controller you can have         scope myFunct   function keyEvent      if  keyEvent which     13      alert  I am an alert

User · Answer

You can also apply it to a controller on a parent element  This example can be used to highlight a row in a table by pressing up down arrow keys   app controller  tableCtrl       scope     element   function  scope   element       scope index   0     row index    scope data          array of items    scope keypress   function offset        console log  keypress   offset       var i    scope index   offset      if  i  lt  0    i    scope data length - 1        if  i  gt    scope data length    i   0            element bind  keydown keypress   function  event        console log  keypress   event  event which       if event which     38       up        scope keypress -1         else if  event which     40       down        scope keypress 1         else         return            event preventDefault                  lt table class  table table-striped  ng-controller  tableCtrl  gt   lt thead gt       lt tr gt           lt th ng-repeat   key  value  in data 0   gt   key   lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr ng-repeat  row in data track by  index  ng-click  draw  index   ng-class   index    index    info        gt           lt td ng-repeat   key  value  in row  gt   value   lt  td gt       lt  tr gt   lt  tbody gt   lt  table gt

User · Answer

Another simple alternative     lt input ng-model  edItem  type  text       ng-keypress    event which     13  foo edItem  0   gt    And the ng-ui alternative    lt input ng-model  edItem  type  text  ui-keypress    enter   foo edItem      gt

User · Answer

Trying  ng-keypress  console log  event   ng-keypress  alert 123     did nothing for me   Strangley the sample at https   docs angularjs org api ng directive ngKeypress  which does ng-keypress  count   count   1   works   I found an alternate solution  which has pressing Enter invoke the button s ng-click    lt input ng-model       onkeypress  if  event which  13  document getElementById  button   click     gt   lt button id  button  ng-click  doSomething    gt Done lt  button gt

User · Answer

All you need to do to get the event is the following   console log angular element event which      A directive can do it  but that is not how you do it

User · Answer

you can use ng-keydown   ng-keyup   ng-press such as this       to triger a function         lt input type  text  ng-keypress  function     gt       or if you have one condion such as when he press escape  27 is the key   code for escape      lt form ng-keydown   event which    27 cancelSplit   0  gt        lt  form gt

User · Answer

lt  DOCTYPE html gt   lt html gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 4 angular min js  gt  lt  script gt   lt body gt   lt div ng-app  myApp  ng-controller  myCtrl  gt  Informe your name  lt input type  text  ng-model  pergunta  ng-keypress  pressionou enter  event    gt  lt  input gt    lt button ng-click  chamar    gt submit lt  button gt   lt h1 gt   resposta   lt  h1 gt    lt  div gt   lt script gt  var app   angular module  myApp          create a service mitsuplik app service  mitsuplik   function         this myFunc   function  parametro            var tmp                for  var x 0 x lt parametro length x                              tmp   parametro substring x x 1    tmp                         return tmp              Calling our service app controller  myCtrl   function  scope  mitsuplik        scope chamar   function               scope resposta   mitsuplik myFunc  scope pergunta               if mitsuplik press  ENTER   execute too    scope pressionou enter   function keyEvent                 if  keyEvent which     13                                       scope chamar                                  lt  script gt   lt  body gt   lt  html gt

User · Answer

You need to add a directive  like this   Javascript   app directive  myEnter   function          return function  scope  element  attrs            element bind  keydown keypress   function  event                if event which     13                    scope  apply function                         scope  eval attrs myEnter                                        event preventDefault                                           HTML    lt div ng-app    ng-controller  MainCtrl  gt       lt input type  text  my-enter  doSomething    gt       lt  div gt

User · Answer

here s my directive   mainApp directive  number   function          return           link  function  scope  el  attr                el bind  keydown keypress   function  event                      ignore all characters that are not numbers  except backspace  delete  left arrow and right arrow                 if   event keyCode  lt  48    event keyCode  gt  57   amp  amp  event keyCode    8  amp  amp  event keyCode    46  amp  amp  event keyCode    37  amp  amp  event keyCode    39                        event preventDefault                                                             usage    lt input number   gt

User · Answer

What about this     lt form ng-submit  chat sendMessage    gt       lt input type  text    gt       lt button type  submit  gt   lt  form gt    Now when you push enter key after write something in your input  the form know how to handle it

[angularjs] How to use a keypress event in AngularJS?

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angular-ui