25

在我的 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'。问题是，'keydown' 在 Firefox 中不起作用，所以只有 'keyup' 在监听 ESC 时起到了神奇的作用。;)

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

解决方案更新： 最后我不得不同时监听“keydown”和“keyup”事件。因为在我的情况下，FF 确实将 ESC keydown 上的输入字段重置为以前的状态，所以它弄乱了我的模型。因此，'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()" >

Ctrl

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

我这样解决这个问题（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 = "";   
    }
}
于 2015-03-24T01:41:10.793 回答
9

监听“keydown”或“keyup”事件而不是“keypress”：

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

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

于 2017-10-21T13:08:41.613 回答
0

我已经设法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替换它。

于 2015-11-07T00:29:24.710 回答
0

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" />
于 2017-07-14T17:19:05.183 回答