ng-keypress in AngularJS

Rana Hasnain Khan 15 Februar 2024

Angular Angular Directive

Wir werden ng-keypress in AngularJS mit Beispielen vorstellen.

Verwendung von `ng-keypress` in AngularJS

Bei der Arbeit an einer AngularJS-Anwendung gibt es viele Situationen, in denen wir einem Tastendruck ein Verhalten zuweisen müssen. Um benutzerdefiniertes Verhalten auf einen Tastendruck anzuwenden, müssen wir die Direktive ng-keypress in einem AngularJS verwenden.

Das ng-keypress-Mandat von AngularJS ersetzt nicht die Komponenten, die für den Tastendruck-Anlass einzigartig sind; beide werden hingerichtet. Dies wird durch die Elemente <input>, <select> und <textarea> unterstützt.

Syntax:

# angularjs
<input ng-keypress="behavior">

Das "behavior" bestimmt, was zu tun ist, wenn die Taste gedrückt wird.

Lassen Sie uns ein Beispiel haben und diese Direktive ng-keypress verwenden. Zuerst erstellen wir die Ansicht in index.html.

Code - 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>

Als nächstes erstellen wir eine Funktion, um die Schlüsselwerte in app.js zu erhalten.

Code - app.js:

# angularjs
var app = angular.module('ngApp', []);
        app.controller('ngController', function ($scope) {
            $scope.getKeyVal = function (event) {
                $scope.valKey = event.keyCode;
            }
        });

Ausgabe:

ng keypress im Beispiel von AngularJS

Autor: 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.

Verwendung von ng-keypress in AngularJS

Verwandter Artikel - Angular Directive

Verwendung von `ng-keypress` in AngularJS