web-dev-qa-db-ja.com

Angular / ESCキーでAngularUIの入力テキストフィールドをクリアする

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

問題の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'をリッスンする必要があります。問題は、Firefoxでは「キーダウン」が機能しないため、「キーアップ」だけがESCをリッスンする手品をしたことです。 ;）

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

SOLUTION UPDATE：結局、「keydown」イベントと「keyup」イベントの両方をリッスンする必要がありました。私の場合、FFはESCキーダウンの入力フィールドを以前の状態にリセットするため、モデルを台無しにしてしまいます。したがって、「keyup」はモデルをクリアし、「keydown」はモデルが空であるかどうかをチェックして適切なアクションを実行します。また、テキストが再び表示されないように、手動で入力の焦点をぼかす必要があります。：/

inputangularjsclearangular-ui
24
smajl

受け入れられた回答 機能しません 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()" >

Ctrl

$scope.resetFilter = function() {
  $scope.filter.abc = null;
};
30
s.Daniel

私はこのようにこの問題を解決します（Controller as vm Syntax）：

[〜＃〜] html [〜＃〜]

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

コントローラ

...
vm.checkEvents = function ($event) {
    if ($event.keyCode == 27) {
        vm.item = "";   
    }
}
10
Bijan

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

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

今のところ、Angular v4の場合、これは機能します：(keyup.esc)="callback()"

1
ktretyak

NgModelも更新するAngular 2バージョン

指令

import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[escapeInput]'
})
export class escapeInput {

  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  private element: HTMLElement;
  private KEY_ESCAPE: number = 27;

  constructor(private elementRef: ElementRef) {
    this.element = elementRef.nativeElement;
  }

  @HostListener('keyup', ['$event']) onKeyDown(event) {
    if (event.keyCode == this.KEY_ESCAPE) {
      event.target.value = '';
      this.ngModelChange.emit(event.target.value);
    }
  }

}

使用法

<input escapeInput class="form-control" [(ngModel)]="modelValue" type="text" />
0
Erkin Djindjiev

EscキーでIE10/11を押すと、デフォルトでtextareaがクリアされます。これはブラウザ機能です。私たちが使用できる他の人のために

 element.bind('keydown keypress', function (e) {
  if(e.which === 27) { // 27 = esc key
   // code for clearing data

    e.preventDefault(); // prevents the default function of the event
  }
});
0
Sagittarius

入力要素のdirectiveクリアを直接__ng-model_クリアして、Firefoxでも適切に機能するように構築できました。そのために、値が既にクリアされているかどうかを確認し（modelGetter(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_に置き換えてください。

0
icl7126