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` 사용