Clear input text field in Angular / AngularUI with

问题:

In several places of my Angular app I need to clear inputs from user with the ESC key. The problem is, I don't know how to do it with text input fields (textarea is clearing OK). See this fiddle:

jsFiddle demonstration of the problem

Binding:

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

Callback I use:

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

Can anyone, please, figure out what I need to do to clear text input with ESC key?

SOLUTION: As adviced by bmleite, you shouldn't listen for 'keypress' but for 'keydown' and 'keyup'. Problem was, that 'keydown' does not work in Firefox so only 'keyup' did the magic trick with listening for ESC. ;)

Working fiddle: http://jsfiddle.net/aGpNf/190/

SOLUTION UPDATE: In the end I had to listen for both 'keydown' and 'keyup' events. Because in my case FF does reset input field on ESC keydown to previous state, so it messed up my model. So 'keyup' clears the model and 'keydown' checks if model is empty and does appropriate action. I also need to manually defocus input to prevent text popping back in. :/

回答1:

The accepted answer does not work for IE 10/11. Here is a solution based on another question that does:

Directive

.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:

I solve this problem like this (Controller as vm Syntax):

HTML

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

Controller

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

回答3:

Listen for 'keydown' or 'keyup' events instead of 'keypress':

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

回答4:

For now, with Angular v4, this works: (keyup.esc)="callback()"

回答5:

On esc key press IE10/11 by default clears the textarea.Its a browser feature. For others we can use

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

回答6:

I've managed to build a directive clearing directly ng-model of the input element and properly working also in Firefox. For that I need to check whether the value is already cleared (modelGetter(scope)) and also wrap the assignment to the zero $timeout method (to apply it in next digest call).

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 $ property is jQuery, feel free to replace it with magic number 27.

回答7:

Angular 2 version which also updates ngModel

Directive

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

}

Usage

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