Очистить поле ввода текста в Angular/AngularUI с помощью клавиши ESC

В нескольких местах моего приложения 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 делает поле ввода reset на клавиатуре ESC до предыдущего состояния, поэтому оно испортило мою модель. Таким образом, "keyup" очищает проверку модели и "keydown" , если модель пуста и выполняет соответствующие действия. Мне также нужно вручную дефокусировать входные данные, чтобы не допустить повторного ввода текста.:/

Ответы

Ответ 1

Принятый ответ не работает для 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;
};

Ответ 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 = "";   
    }
}

Ответ 3

Слушайте события "keydown" или "keyup" вместо "keypress":

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

Ответ 4

На клавише esc нажмите IE10/11 по умолчанию, очистив текстовое поле. Это функция браузера. Для других мы можем использовать

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

Ответ 5

Мне удалось создать очистку directive непосредственно ng-model элемента ввода и правильно работать также в Firefox. Для этого мне нужно проверить, очищено ли значение (modelGetter(scope)), а также переносить присвоение методу 0 $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);
        }
      });
    }
  };
}]);

My $ свойство jQuery, не стесняйтесь заменить его магическим номером 27.

Ответ 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" />

Ответ 7

В настоящее время с Angular v4 это работает: (keyup.esc)="callback()"