Question

在我的Angular应用程序的几个地方，我需要使用ESC键清除用户的输入。问题是，我不知道如何使用文本输入字段（textarea正在清除）。看到这个小提琴：

结合：

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

我使用的回调：

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

任何人都可以找出我需要做些什么才能用ESC键清除文字输入？

解：正如bmleite所建议的那样，你不应该听“按键”，而应该听'keydown'和'keyup'。问题是，'keydown'在Firefox中不起作用，所以只有'keyup'才能听取ESC的魔术。 ;）

工作小提琴：http://jsfiddle.net/aGpNf/190/

解决方案更新： 最后，我不得不听“keydown”和“keyup”事件。因为在我的情况下FF确实将ESC keydown上的输入字段重置为之前的状态，所以它搞砸了我的模型。所以'keyup'清除模型和'keydown'检查模型是否为空并执行适当的操作。我还需要手动散焦输入，以防止文本弹出。：/

Answer 1

IE 10/11的已接受答案does not work。以下是解决方案based on another question：

<强>指令

.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;
};

Answer 2

我像这样解决这个问题（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 = "";   
    }
}

Answer 3

听取'keydown'或'keyup'事件而不是'keypress'：

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

Answer 4

在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
  }
});

Answer 5

我设法直接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，您可以将其替换为magic number 27。

Answer 6

Angular 2版本，它也更新了ngModel

指令

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" />

Answer 7

目前，使用Angular v4，这可以：(keyup.esc)="callback()"

使用ESC键清除Angular / AngularUI中的输入文本字段

7 个答案: