input - change - ng-form example

Borrar el campo de texto de entrada en Angular/AngularUI con la tecla ESC

Question

En varios lugares de mi aplicación angular, necesito borrar las entradas del usuario con la tecla ESC. El problema es que no sé cómo hacerlo con los campos de entrada de texto (el área de texto está despejando). Mira este violín

demostración jsFiddle del problema

Unión:

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

Devolución de llamada que uso:

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

¿Puede alguien, por favor, descubrir qué debo hacer para borrar el ingreso de texto con la tecla ESC ?

SOLUCIÓN: Según lo bmleite , no debería escuchar "presionar tecla" sino "keydown" y "keyup" . El problema era que esa ''combinación'' no funciona en Firefox, así que solo ''keyup'' hizo el truco de magia con ESC para escuchar. ;)

Violín de trabajo: http://jsfiddle.net/aGpNf/190/

ACTUALIZACIÓN DE LA SOLUCIÓN: Al final tuve que escuchar los eventos ''keydown'' y ''keyup''. Porque en mi caso, FF restablece el campo de entrada en la tecla ESC al estado anterior, por lo que estropeó mi modelo. Entonces ''keyup'' borra el modelo y ''keydown'' comprueba si el modelo está vacío y realiza la acción apropiada. También necesito desenfocar manualmente la entrada para evitar que el texto vuelva a aparecer.: /

Answer 1

Al presionar la tecla esc, IE10 / 11 borra por defecto el área de texto. Es una característica del navegador. Para otros, podemos usar

 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 2

Escuche los eventos ''keydown'' o ''keyup'' en lugar de ''keypress'':

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

Answer 3

La respuesta aceptada no funciona para IE 10/11. Aquí hay una solución basada en otra pregunta que hace:

Directiva

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

HTML:

<input ... ng-model="filter.abc" esc-key="resetFilter()" >

Ctrl

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

Answer 4

Me las he arreglado para crear una directive borre directamente ng-model del elemento de entrada y funcione correctamente también en Firefox . Para eso necesito verificar si el valor ya está borrado ( modelGetter(scope) ) y también ajustar la asignación al método zero $timeout (para aplicarlo en la próxima llamada resumida).

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

Mi $ propiedad es jQuery , siéntete libre de reemplazarla con el número mágico 27 .

Answer 5

Por ahora, con Angular v4, esto funciona: (keyup.esc)="callback()"

Answer 6

Resuelvo este problema de esta manera (Controlador como sintaxis vm):

HTML

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

Controlador

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

Answer 7

Versión angular 2 que también actualiza ngModel

Directiva

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

}

Uso

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