25

Angular アプリのいくつかの場所で、ESC キーを使用してユーザーからの入力をクリアする必要があります。問題は、テキスト入力フィールドでそれを行う方法がわからないことです（テキストエリアはクリアできます）。このフィドルを参照してください：

問題の jsFiddle デモンストレーション

バインディング:

<input ng-model="search.query" ui-keypress="{esc: 'keyCallback($event)'}" />

私が使用するコールバック：

$scope.keyCallback = function($event) {
  $event.preventDefault();
  $scope.search.query = '';
}

ESC キーでテキスト入力をクリアするために何をする必要があるか、誰でも理解できますか?

解決策: bmleiteのアドバイスに従って、'keypress' ではなく'keydown'と'keyup'をリッスンする必要があります。問題は、'keydown' が Firefox では機能しないため、'keyup' だけが ESC をリッスンして魔法のトリックを行ったことです。;)

作業フィドル: http://jsfiddle.net/aGpNf/190/

解決策の更新: 最終的に、「keydown」イベントと「keyup」イベントの両方をリッスンする必要がありました。私の場合、FFはESCキーダウンの入力フィールドを以前の状態にリセットするため、モデルが台無しになりました。したがって、「keyup」はモデルをクリアし、「keydown」はモデルが空かどうかをチェックして適切なアクションを実行します。また、テキストが再び飛び出さないように、手動で入力のフォーカスを外す必要があります。:/

4

6 に答える 6

31

受け入れられた回答は、IE 10/11では機能しません。これは別の質問に基づく解決策です：

指令

.directive('escKey', function () {
  return function (scope, element, attrs) {
    element.bind('keydown keypress', function (event) {
      if(event.which === 27) { // 27 = esc key
        scope.$apply(function (){
          scope.$eval(attrs.escKey);
        });

        event.preventDefault();
      }
    });
    scope.$on('$destroy', function() {
        element.unbind('keydown keypress')
    })
  };
})

HTML:

<input ... ng-model="filter.abc" esc-key="resetFilter()" >

コントロール

$scope.resetFilter = function() {
  $scope.filter.abc = null;
};
于 2014-11-20T16:11:46.010 に答える
11

私はこの問題を次のように解決します (コントローラーは vm 構文として):

HTML

<input ... ng-model="vm.item" ng-keyup="vm.checkEvents($event)">

コントローラ

...
vm.checkEvents = function ($event) {
    if ($event.keyCode == 27) {
        vm.item = "";   
    }
}
于 2015-03-24T01:41:10.793 に答える
9

「keypress」の代わりに「keydown」または「keyup」イベントをリッスンします。

<input ng-model="search.query" ui-keydown="{esc: 'keyCallback($event)'}" />
于 2013-02-01T13:59:11.337 に答える
0

入力要素からdirective直接クリアリングを構築し、.NETでも適切に機能することができました。そのためには、値がすでにクリアされているかどうかを確認し ( )、割り当てを zeroメソッドにラップする必要があります (次のダイジェスト呼び出しで適用するため)。 ng-modelFirefoxmodelGetter(scope)$timeout

mod.directive('escClear', ['$timeout', '$parse', function($timeout, $parse) {
  return {
    link : function(scope, element, attributes, ctrl) {
      var modelGetter = $parse(attributes.ngModel);
      element.bind('keydown', function(e) {
        if (e.keyCode === $.ui.keyCode.ESCAPE && modelGetter(scope)) {
          $timeout(function() {
            scope.$apply(function () {modelGetter.assign(scope, '');});
          }, 0);
        }
      });
    }
  };
}]);

私の$財産はjQuery、マジックナンバー 27に置き換えてください。

于 2015-11-07T00:29:24.710 に答える