Ng-Keypress dans AngularJS

Rana Hasnain Khan 15 février 2024

Angular Angular Directive

Nous allons introduire ng-keypress dans AngularJS avec des exemples.

Utiliser `ng-keypress` dans AngularJS

Lorsque vous travaillez sur une application AngularJS, il existe de nombreuses situations où nous devons attribuer un comportement à une pression de touche. Pour appliquer un comportement personnalisé sur une pression de touche, nous devons utiliser la directive ng-keypress dans un AngularJS.

Le mandat ng-keypress d’AngularJS ne remplacera pas les composants propres à l’événement keypress ; les deux seront exécutés. Ceci est supporté par les éléments <input>, <select> et <textarea>.

Syntaxe:

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

Le "behavior" déterminera ce qu’il faut faire lorsque la touche est enfoncée.

Prenons un exemple et utilisons cette directive ng-keypress. Dans un premier temps, nous allons créer la vue dans 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>

Ensuite, nous créons une fonction pour obtenir les valeurs clés dans app.js.

Code - app.js:

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

Production:

ng keypress dans l’exemple angularjs

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

Utiliser ng-keypress dans AngularJS

Article connexe - Angular Directive

Utiliser `ng-keypress` dans AngularJS