AngularJS – ng-keydown 指令

AngularJS 中的 ng-keydown 指令基本上指定了按下 <down> 键时的自定义事件。每当调用keydown事件时，我们都可以执行多个功能。此事件还支持不同类型的元素，如 < input >、< select > 和 < textarea >。

语法

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

示例 - ngKeydown 指令

在您的 Angular 项目目录中创建一个文件“ ngKeydown.html ”并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>ngKeydown Directive</title>

      <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js">
      </script>

      <style type="text/css">
         .keyDown {
            background-color: blue;
            color: white;
         }
         .keyUp {
            background-color: white;
         }
      </style>
      </head>

      <body ng-app style="text-align: center;">
      <h1 style="color:green">
         Welcome to nhooo.com
      </h1>
         <h2>
            AngularJS | ngKeydown 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>

输出结果

要运行上述代码，只需转到您的文件并将其作为普通 HTML 文件运行即可。

在 keyDown -

基础教程