Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use a keypress event in AngularJS?

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  } 
like image 264
Venkata K. C. Tata Avatar asked Jul 04 '13 12:07

Venkata K. C. Tata


People also ask

How does angular handle keypress events?

you can easily use keypress event in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13 and angular 14 application. When user will press key on input box field then trigger onKeypressEvent() of angular component. we will use (change) attribute for call function.

What is a keypress event?

The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys.

What is Keydown event in angular?

Definition and Usage. The ng-keydown directive tells AngularJS what to do when the keyboard is used on the specific HTML element. The ng-keydown directive from AngularJS will not override the element's original onkeydown event, both will be executed.

What is Keyup and Keydown in jQuery?

jQuery keyup() Method The order of events related to the keyup event: keydown - The key is on its way down. keypress - The key is pressed down. keyup - The key is released.


1 Answers

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> 
like image 65
EpokK Avatar answered Sep 22 '22 21:09

EpokK