Angular / Angular에서 입력 텍스트 필드 지우기ESC키가 있는 UI

Angular / Angular에서 입력 텍스트 필드 지우기ESC키가 있는 UI

내 Angular 앱의 여러 곳에서 ESC 키로 사용자의 입력을 지워야 합니다.문제는 텍스트 입력 필드(텍스트 영역이 OK를 지우고 있음)를 어떻게 하는지 모르겠다는 것입니다.다음 항목 참조:

jsFiddle 문제 시연

바인딩:

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

사용하는 콜백:

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

ESC 키로 문자 입력을 지우려면 어떻게 해야 하는지 알아봐 주실 수 있나요?

해결책: 비엠라이트의 조언대로 '키 누르기'를 듣는 것이 아니라 '키 다운'과 '키 업'을 들어야 합니다.문제는 Firefox에서 'keydown'이 작동하지 않기 때문에 'keyup'만이 ESC 듣기로 마법을 부렸다는 것입니다. ;)

작업 fiddle: http://jsfiddle.net/aGpNf/190/

솔루션 업데이트: 결국 '키다운'과 '키업' 이벤트를 모두 들어야 했습니다.왜냐하면 저의 경우 FF는 ESC 키다운의 입력 필드를 이전 상태로 리셋하기 때문에 제 모델을 엉망으로 만들었습니다.따라서 'keyup'은 모델을 지우고 'keydown'은 모델이 비어 있는지 확인하고 적절한 작업을 수행합니다.텍스트가 다시 튀어나오지 않도록 수동으로 입력을 디포커스해야 합니다. :/

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

이 문제를 다음과 같이 해결합니다(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 = "";   
    }
}

'키 누르기' 대신 '키 다운' 또는 '키 업' 이벤트 듣기:

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

현재 Angular v4에서는 다음과 같이 작동합니다.(keyup.esc)="callback()"

저는 그럭저럭 일을 해냈습니다.directive직접 지우기ng-model입력 요소의 그리고 또한 적절하게 작동합니다.Firefox. 이를 위해 이미 값이 지워졌는지 확인해야 합니다 (modelGetter(scope)) 및 과제를 0으로 포장합니다.$timeoutmethod(다음 다이제스트 호출에서 적용).

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.

ngModel을 업데이트하는 Angular 2 버전

지시

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

언급URL : https://stackoverflow.com/questions/14646954/clear-input-text-field-in-angular-angularui-with-esc-key