AngularJS で ng-Keypress を使用する方法
Rana Hasnain Khan
2024年2月15日
![AngularJS で ng-Keypress を使用する方法](/img/Angular/ag-feature-image---ng-keypress-in-angularjs.webp)
例を挙げて、AngularJS の ng-keypress
を紹介します。
AngularJS で ng-keypress
を使用する
AngularJS アプリケーションで作業しているときに、キーを押したときに動作を割り当てる必要がある場合が多くあります。キープレスにカスタム動作を適用するには、AngularJS で ng-keypress
ディレクティブを使用する必要があります。
AngularJS の ng-keypress
マンデートは、キープレスの機会に固有のコンポーネントに取って代わることはありません。両方が実行されます。これは、<input>
、<select>
、および <textarea>
要素によってサポートされます。
構文:
# angularjs
<input ng-keypress="behavior">
"behavior"
は、キーが押されたときに何をするかを決定します。
例を挙げて、この ng-keypress
ディレクティブを使用してみましょう。まず、index.html
にビューを作成します。
コード-index.html
:
# angularjs
<!DOCTYPE html>
<html>
<head>
<title>ng-keypress Directive By Rana Hasnain</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
</head>
<body style="text-align:center">
<div ng-app="ngApp" ng-controller="ngController">
<h1 style="color:Blue">
Delft Stack
</h1>
Enter Name: <input type="text"
ng-keypress="getKeyVal($event)" >
<br><br>
<span style="color:green;">
Code of Key Is: {{valKey}}
</span>
</div>
</body>
</html>
次に、app.js
のキー値を取得する関数を作成します。
コード-app.js
:
# angularjs
var app = angular.module('ngApp', []);
app.controller('ngController', function ($scope) {
$scope.getKeyVal = function (event) {
$scope.valKey = event.keyCode;
}
});
出力:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn