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:

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

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 }

github.com/ccampbell/mousetrap helped. in case looking for a library. — Gokul
– Gokul, Commented Aug 8, 2020 at 6:00

Alexander Puchkov · Accepted Answer · 2015-09-03 13:27:54Z

817

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:

<div ng-app="" ng-controller="MainCtrl"> <input type="text" my-enter="doSomething()"> </div>

edited Sep 3, 2015 at 13:27

Alexander Puchkov

5,9934 gold badges38 silver badges49 bronze badges

answered Jul 4, 2013 at 13:53

EpokK

38.1k9 gold badges63 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Pete Martin Over a year ago

@DerekAdair The directive binds to the keydown and keypress events of the element it is attributed to. When the event is received the supplied expression is evaluated inside an $apply block.

Gabriel Over a year ago

More safe to defined the key like this : var key = typeof event.which === "undefined" ? event.keyCode : event.which; as long as event.which is not used by every browser. See comments here : stackoverflow.com/a/4471635/2547632

user1713964 Over a year ago

I would add also keyup in the bind test

Marius Balčytis Over a year ago

also note that using ng prefix is not recommended, as this can clash with future ng-* directives. Use your own instead

nawlbergs Over a year ago

Dont forget to destroy your bindings: scope.$on('$destroy', function(){ element.unbind('keydown'); })

|

Rahil Wazir · Accepted Answer · 2015-10-06 08:17:05Z

361

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'); } ...

edited Oct 6, 2015 at 8:17

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

answered Sep 5, 2013 at 0:18

Chris Reynolds

5,5031 gold badge18 silver badges12 bronze badges

9 Comments

Cebjyre Over a year ago

To save other people some time, ng-keypress doesn't seem to be part of angular 1.0.x, ui-keypress (with slightly different calling semantics) is available though: angular-ui.github.io/ui-utils

Cornelius Over a year ago

I think the comment above this was aimed at a different answer. (Just for reference.)

Trevor de Koekkoek Over a year ago

Martin that's actually the function of a controller: to handle UI events.

Martin Over a year ago

Better yet, use ngKeypress and pass the $event to a custom filter.

bFunc Over a year ago

Best answer +1. Why should I make my own directive, if there is one, already included in Angular?

|

Eric Chen · Accepted Answer · 2017-07-04 01:13:04Z

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:

<a ng-click="action()">action</a>

Now, let's add keyboard support.

trigger by enter key:

<a ng-click="action()" ng-keydown="$event.keyCode === 13 && action()">action</a>

by space key:

<a ng-click="action()" ng-keydown="$event.keyCode === 32 && action()">action</a>

by space or enter key:

<a ng-click="action()" ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

if you are in modern browser

<a ng-click="action()" ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

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

the secret is the conditional before the method to be executed $event.which === 13 && action() - thanks!
'$event.which' is not working for me, but I found '$event.keyCode' which is working.
"old browsers like IE9" .. never thought this day will come :)
Why hasn't anyone updated the code snippets here to use $event.keyCode then? I'd edit it myself, but I'm unable to for some reason.

Rodolfo Jorge Nemer Nogueira · Accepted Answer · 2014-08-05 21:47:35Z

104

Another simple alternative:

<input ng-model="edItem" type="text" ng-keypress="($event.which === 13)?foo(edItem):0"/>

And the ng-ui alternative:

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>

answered Aug 5, 2014 at 21:47

Rodolfo Jorge Nemer Nogueira

5,1402 gold badges44 silver badges32 bronze badges

2 Comments

Paulo Oliveira Over a year ago

ng-ui it's ambiguous, instead you should say "UI.Utils" or share the link: angular-ui.github.io/ui-utils

cafesanu Over a year ago

ui-utils seems to be deprecated

marcinzajkowski · Accepted Answer · 2015-05-29 21:20:06Z

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:

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">

Fineas · Accepted Answer · 2016-03-11 15:48:18Z

You can use ng-keydown ="myFunction($event)" as attribute.

<input ng-keydown="myFunction($event)" type="number"> myFunction(event) { if(event.keyCode == 13) { // '13' is the key code for enter // do what you want to do when 'enter' is pressed :) } }

Bubbles · Accepted Answer · 2017-01-11 06:50:41Z

html

<textarea id="messageTxt" rows="5" placeholder="Escriba su mensaje" ng-keypress="keyPressed($event)" ng-model="smsData.mensaje"> </textarea>

controller.js

$scope.keyPressed = function (keyEvent) { if (keyEvent.keyCode == 13) { alert('presiono enter'); console.log('presiono enter'); } };

will Farrell · Accepted Answer · 2014-05-07 17:21:25Z

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 < 0) { i = $scope.data.length - 1; } if (i >= $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(); }); }]); <table class="table table-striped" ng-controller="tableCtrl"> <thead> <tr> <th ng-repeat="(key, value) in data[0]">{{key}}</th> </tr> </thead> <tbody> <tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''"> <td ng-repeat="(key, value) in row">{{value}}</td> </tr> </tbody> </table>

snaran · Accepted Answer · 2014-10-19 16:36:13Z

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.

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/> <button id="button" ng-click="doSomething()">Done</button>

ng-keypress="console.log('foo')" did not work for me either, but if you do ng-keypress="fooMethod()" and in your controller $scope.fooMethod = function() { console.log('fooMethod called'); } does work.

Marcus Poli · Accepted Answer · 2017-11-10 16:27:24Z

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> Informe your name:<input type="text" ng-model="pergunta" ng-keypress="pressionou_enter($event)" ></input> <button ng-click="chamar()">submit</button> <h1>{{resposta}}</h1> </div> <script> var app = angular.module('myApp', []); //create a service mitsuplik app.service('mitsuplik', function() { this.myFunc = function (parametro) { var tmp = ""; for (var x=0;x<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(); } } }); </script> </body> </html>

tassaert.l · Accepted Answer · 2014-11-18 22:10:39Z

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.

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

juanmorschrott · Accepted Answer · 2015-07-10 10:24:45Z

What about this?:

<form ng-submit="chat.sendMessage()"> <input type="text" /> <button type="submit"> </form>

Now when you push enter key after write something in your input, the form know how to handle it.

Dmitri Algazin · Accepted Answer · 2013-11-13 10:10:00Z

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

 <div> <form ng-submit="addTag(newTag)"> <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)"> <div ng-show="preloadedTags.length > 0"> <nav class="dropdown"> <div class="dropdown-menu preloadedTagPanel"> <div ng-repeat="preloadedTag in preloadedTags" class="preloadedTagItemPanel" ng-class="preloadedTag.activeTag ? 'preloadedTagItemPanelActive' : '' " ng-click="selectTag(preloadedTag)" tabindex="{{ $index }}"> <a class="preloadedTagItem" ng-class="preloadedTag.activeTag ? 'preloadedTagItemActive' : '' " ng-click="selectTag(preloadedTag)">{{ preloadedTag.label }}</a> </div> </div> </nav> </div> </form> </div>

Controller.js

$scope.preloadTags = function () { var newTag = $scope.newTag; if (newTag && 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 > $scope.preloadedTags.length - 1) { return 0; } if (index < 0) { return $scope.preloadedTags.length - 1; } return index; } function removeAllActiveTags() { for (var x = 0; x < $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; }

I think this is a nasty solution. A controller shouldn't handle UI things like keypresses.
This answer contains a lot of "noise", in a manner of speaking, containing a lot of markup that does — as far as I can see at a glance — not relate to the actual question at hand. It might be more succinct/useful to condense the code in the answer and provide the full example in a gist/jsfiddle/plnkr.
@MartinAndersen, where should a keypress be handled in an angular app?
When I look at it now it looks okay. It's basically how keypresses has always been handled with the JS event model.

Abdellah Stands with Gaza · Accepted Answer · 2014-09-03 15:29:33Z

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 :

<button auto-focus ng-click="func()">ok</button>

That should be fine if you want to press the button onSpace or Enter clicks .

WtFudgE · Accepted Answer · 2016-04-18 10:30:02Z

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 < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) { event.preventDefault(); } }); } }; });

usage:

<input number />

Eassa Nassar · Accepted Answer · 2016-09-19 08:58:31Z

you can use ng-keydown , ng-keyup , ng-press such as this .

to triger a function :

 <input type="text" ng-keypress="function()"/>

or if you have one condion such as when he press escape (27 is the key code for escape)

 <form ng-keydown=" event.which=== 27?cancelSplit():0"> .... </form>

FreshPow · Accepted Answer · 2017-05-31 19:57:30Z

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]

Mukundhan · Accepted Answer · 2018-10-18 08:41:58Z

(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);

Konkret · Accepted Answer · 2019-08-27 00:24:51Z

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.

Collectives™ on Stack Overflow

How to use a keypress event in AngularJS?

19 Answers 19

18 Comments

9 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

18 Comments

9 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Related