¿Cómo puedo detectar onKeyUp en AngularJS?¿Cómo puedo detectar onKeyUp en AngularJS?
estoy buscando una directiva 'ngOnkeyup', similar a ngChange, pero no puedo encontrar nada adecuado.
Si no hay una directiva de este tipo, hay una manera limpia para poner en el controlador de un evento onkeyup navegador nativo?
EDIT: véase el segundo resultado debajo de maklemenz que se refiere a la nueva incorporada en ng-keyup Directiva
Se podría utilizar el angular-ui library:
Con angular-ui, que pueda acaba de hacer
<input ui-event="{keyup: 'myFn($event)'}"
Si no desea utilizar otra biblioteca, la forma más eficiente y sencilla de hacer esto es:
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">
Editar: Si quería para detectar qué tecla se ha pulsado, tiene dos opciones básicas en realidad. Podría agregar un atributo a la directiva para manejar las claves permitidas dentro de la directiva, o podría pasar la tecla presionada a su controlador. En general, recomendaría que la directiva maneje el método clave.
He aquí un ejemplo de dos maneras: http://jsfiddle.net/bYUa3/2
Usted tendrá que crear su directiva personalizada si las directivas predeterminadas no son suficientes. Algo como esto, ¿puede ser?
<!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>
FYI - Me fue simplemente busquen esto hoy y parece que hay una sucursal en github de angular que aborda el tema de keydown keyup.
https://github.com/angular/angular.js/pull/1622
Se ha fusionado en maestro ... Sin embargo, no parece que aparecerá en una versión 1.1.3 hasta
Con el fin de construir el angular con la opción-ng keyup en su lugar puede descargar el código de git y ejecutar rake package en la carpeta. Por supuesto en Windows eso significa instalar Node.js y Ruby y posiblemente algunos otros aros (tenía errores de fork en win32)
Sin embargo, conseguí el keyup "incorporado" al final.
Además de la Carpeta de eventos ya se ha mencionado, ahora se puede utilizar estos convenientes directivas tecla * ui-de interfaz de usuario Angular:
<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>
Para todos aquellos que buscan para esa función hoy, favor utilizar el funcionario ng-keyup Directiva:
<input type="text" ng-keyup="{expression}" />
¿Hay alguna forma de obtener un evento de tecla arriba o de tecla en el objeto ventana en general? entonces puedo verificar si presiono Ctrl? –
@TheRedPea Puedes poner tu ng-app y tu ng-keyup en
. A continuación, agregue la función al $ rootScope o también agregue ng-controller. No probado, pero debería funcionar. – maklemenzSi entiendo su pregunta corectly, y Está buscando la directiva ng-keyup. Aquí hay un enlace: http://docs.angularjs.org/api/ng.directive:ngKeyup
Solo para ayudar a alguien que, como yo, quería lanzar el evento solo con una determinada clave. Aquí está el código que usa ng-keyup que llama a mi función cancel() cuando, y solo cuando, se presiona escape. Para averiguar qué código clave que desea mirar en this website
ng-keyup="$event.keyCode == 27 ? cancel() : ''"
Tenga en cuenta que como @maklemenz mencionado este utiliza la directiva angular integrado disponible
Gracias por su respuesta. ¿Cómo obtengo la tecla presionada con su solución no angular? – fadedbee
Agregué algo al post principal sobre la detección de la clave. –
Esos son justo lo que necesito. Gracias por su ayuda, realmente estoy empezando a amar usar AngularJS. Se siente mal estar desperdiciando la experiencia de un año de usar KnockoutJS, pero AngularJS parece ser mucho más fácil de mantener y accesible para los nuevos desarrolladores. – fadedbee