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 }
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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With