web-dev-qa-db-ja.com

angular.jsでkeydownまたはkeypressイベントを検出するにはどうすればよいですか？

Angular.jsを使用して、携帯電話番号テキストボックスの値を取得して入力値を検証しようとしています。私はangle.jsを使用する初心者であり、これらのイベントを実装し、HTMLコードのフォーム入力を検証または操作するためにJavaScriptを配置する方法がわかりません。

これは私のHTMLです：

    <div>
        <label for="mobile_number">Mobile Number</label>
        <input type="text" id="mobile_number" placeholder="+639178983214" required
           ngcontroller="RegisterDataController" ng-keydown="keydown">
    </div>

そして私のコントローラー：

    function RegisterDataController($scope, $element) {
       console.log('register data controller');
       console.log($element);
       $scope.keydown = function(keyEvent) {
        console.log('keydown -'+keyEvent);
       };
    }

Angular.jsでkeydownイベントを使用する方法がわかりません。適切に使用する方法も検索しました。また、ディレクティブに対する入力を検証できますか？または、キーダウンやキープレスなどのイベントを使用するために行ったようなコントローラーを使用する必要がありますか？

htmltwitter-bootstrapangularjsangularjs-directive
33
abelski

更新：

ngKeypress、ngKeydown、およびngKeyupは、AngularJSの一部になりました。

<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">

<!-- or call a controller/directive method and pass $event as parameter.
     With access to $event you can now do stuff like 
     finding which key was pressed -->
<input ng-keypress="changed($event)">

詳細はこちら：

https://docs.angularjs.org/api/ng/directive/ngKeypresshttps://docs.angularjs.org/api/ng/directive/ngKeydown - https://docs.angularjs.org/api/ng/directive/ngKeyup

以前のソリューション：

解決策1：ng-changeでng-modelを使用する

<input type="text" placeholder="+639178983214" ng-model="mobileNumber" 
ng-controller="RegisterDataController" ng-change="keydown()">

JS：

function RegisterDataController($scope) {       
   $scope.keydown = function() {
        /* validate $scope.mobileNumber here*/
   };
}

解決策2. $watchを使用する

<input type="text" placeholder="+639178983214" ng-model="mobileNumber" 
ng-controller="RegisterDataController">

JS：

$scope.$watch("mobileNumber", function(newValue, oldValue) {
    /* change noticed */
});
50
AlwaysALearner

入力の「ng-keydown」属性を使用して正しい軌道に乗っていましたが、簡単なステップを逃しました。そこにng-keydown属性を置いたからといって、angularはそれをどう処理するかを知っている。それが「ディレクティブ」が出てくるところである。あなたは属性を正しく使用したが、 angular html要素でその属性を見たときにどうするかを指示するディレクティブを記述する必要があります。

以下は、その方法の例です。ディレクティブの名前をng-keydownからon-keydownに変更します（見つかった「ベストプラクティス」 here ）を壊さないようにします。

var mod = angular.module('mydirectives');
mod.directive('onKeydown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
             // this next line will convert the string
             // function name into an actual function
             var functionToCall = scope.$eval(attrs.ngKeydown);
             elem.on('keydown', function(e){
                  // on the keydown event, call my function
                  // and pass it the keycode of the key
                  // that was pressed
                  // ex: if ENTER was pressed, e.which == 13
                  functionToCall(e.which);
             });
        }
    };
});

ディレクティブsimpleは、angularに「ng-keydown」というHTML属性が表示されたときに、その属性を持つ要素をリッスンし、渡された関数を呼び出す必要があることを伝えます。次のものがあります。

<input type="text" on-keydown="onKeydown">

そして、コントローラーで（既に持っていたように）、コントローラーのスコープに「onKeydown」と呼ばれる関数を追加します：

$scope.onKeydown = function(keycode){
    // do something with the keycode
}

うまくいけば、それはあなたや知りたい誰かの助けになります

22
tennisgent

Ng-controllerを使用したJavaScriptコード：

$scope.checkkey = function (event) {
  alert(event.keyCode);  //this will show the ASCII value of the key pressed

}

HTMLの場合：

<input type="text" ng-keypress="checkkey($event)" />

KeyCodeメソッドを使用して、チェックおよびその他の条件を配置できるようになりました。

5
Prateek

チェックアウトできますAngular UI @ http://angular-ui.github.io/ui-utils/ keydown、keyupを検出するための詳細イベントハンドルコールバック関数を提供します、keypress（Enterキー、Backspaceキー、alterキー、controlキー）

<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>
5
JQuery Guru