La directiva ng-keyup en AngluarJS se usa para aplicar un comportamiento personalizado en un evento keyup. Es compatible con los elementos <input>, <select> y <textarea>.
Sintaxis:
<element ng-keyup="expression"> Contents... </element>
Ejemplo: este ejemplo usa la directiva ng-keyup para cambiar el color de fondo cuando se presiona el botón hacia arriba y hacia abajo.
html
<!DOCTYPE html>
<html>
<head>
<title>ng-keyup Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style type="text/css">
.keyDown {
background-color: yellow;
color: black;
}
.keyUp {
background-color: green;
color:white;
}
</style>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>ng-keyup Directive</h2>
<div>
<b>Enter Name: </b><input type="text"
ng-model="searchValue" ng-keydown="keyDown=true"
ng-keyup="keyDown=false" ng-class=
"{true:'keyDown', false:'keyUp'}[keyDown]"/>
<br>
</div>
</body>
</html>
Salida:
cuando la tecla está presionada:
Cuando la tecla está arriba:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA