AngularJS | Directiva ng-keydown

La directiva ng-keydown en AngluarJS se usa para aplicar un comportamiento personalizado en un evento keydown. Es compatible con los elementos <input>, <select> y <textarea>.

Sintaxis:

 <element ng-keydown="expression"> Contents... </element>

Ejemplo: este ejemplo usa la directiva ng-keydown para cambiar el color de fondo después de presionar el botón.

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-keydown 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: green;
            color: white;
        }
        .keyUp {
            background-color: white;
        }
    </style>
</head>
  
<body ng-app style="text-align:center">
      
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <h2>ng-keydown 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:
Antes de pulsar el botón:
ngkeydown
Después de pulsar el botón:
ngkeydown

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *