AngularJS で ng-Keypress を使用する方法

Rana Hasnain Khan 2024年2月15日

Angular Angular Directive

例を挙げて、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;
            }
        });

出力：

AngularJS の例での ng keypress

著者： Rana Hasnain Khan

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.

AngularJS で ng-keypress を使用する

関連記事 - Angular Directive

AngularJS で `ng-keypress` を使用する