Menu
The onkeyup attribute fires when the user releases a key (on the keyboard). Tip: The order of events related to the onkeyup event: onkeydown. onkeypress.
Definition and Usage The onkeyup attribute fires when the user releases a key (on the keyboard).
Definition and UsageThe ng-keyup directive tells AngularJS what to do when the keyboard is used on the specific HTML element. The ng-keyup directive from AngularJS will not override the element's original onkeyup event, both will be executed.
(keyup) is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls. When a user presses and releases a key, the (keyup) event occurs.
For everyone looking for that feature today, please use the official ng-keyup directive:
<input type="text" ng-keyup="{expression}" />
EDIT: see second answer below from maklemenz which refers to the new built-in ng-keyup directive
You could use the angular-ui library:
With angular-ui, you can just do
<input ui-event="{keyup: 'myFn($event)'}"
If you don't want to use another library, the most efficient and simple way to do this is:
JS
myApp.directive('onKeyup', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function() {
scope.$apply(attrs.onKeyup);
});
};
});
HTML:
<input on-keyup="count = count + 1">
Edit: If you wanted to detect which key was pressed, you have two basic options really. You could add an attribute to the directive to handle the allowed keys within the directive, or you could pass the key pressed to your controller. I would generally recommend the directive handles the key method.
Here's an example of both ways: http://jsfiddle.net/bYUa3/2
You'll have to create your custom directive if default directives are not enough. Something like this, may be?
<!doctype html>
<html lang="en" ng-app="app">
<body ng-controller="ctrl">
<input ng-onkeyup="keyup()"/>
<script src="js/lib/angular-1.0.0.min.js"></script>
<script>
angular.module('app', []).directive('ngOnkeyup', function() {
return {
restrict: 'A',
scope: {
func: '&ngOnkeyup'
},
link: function( scope, elem, attrs ) {
elem.bind('keyup', scope.func);
}
};
});
function ctrl($scope) {
$scope.keyup = function() {
alert('keyup fired');
};
}
</script>
</body>
</html>
In addition to the already mentioned Event Binder, you can now use these convenient ui-key* directives from Angular UI:
<textarea
ui-keypress="{13:'keypressCallback($event)'}">
</textarea>
<textarea
ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
</textarea>
<textarea
ui-keyup="{'enter':'keypressCallback($event)'}">
</textarea>
<script>
$scope.keypressCallback = function($event) {
alert('Voila!');
$event.preventDefault();
};
</script>
http://angular-ui.github.io/#/directives-keypress
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