資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究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 src="https://ajax.googleapis.com/ajax/libs/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 Tutorials Point
</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 時 −
示例 2
在 Angular 專案目錄中建立一個 “ngKeydown.html” 檔案，並複製貼上以下程式碼段。
<!DOCTYPE html>
<html>
<head>
<title>ngKeydown Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app style="text-align: center;">
<h1 style="color:green">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngKeydown Directive
</h2>
<div>
<input ng-keydown="count = count + 1" ng-init="count=0">
key down count: {{count}}
</div>
</body>
</html>輸出
要執行上述程式碼，只需轉到你的檔案並像一個普通的 HTML 檔案那樣執行它。
將計算 keydown 事件的發生次數 −
更新時間： 2021 年 10 月 8 日
281 次瀏覽
廣告