Xóa trường nhập văn bản trong Angular/AngularUI bằng phím ESC

Question

Ở một số nơi trong ứng dụng Góc của tôi, tôi cần xóa các đầu vào từ người dùng bằng phím ESC. Vấn đề là, tôi không biết làm thế nào để làm điều đó với các lĩnh vực đầu vào văn bản (textarea là xóa OK). Xem fiddle này:

jsFiddle demonstration of the problem

Binding:

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

Callback tôi sử dụng:

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

thể bất cứ ai, xin vui lòng, tìm ra những gì tôi cần phải làm gì để xóa nhập văn bản với phím ESC?

SOLUTION: Như adviced bởi bmleite, bạn không nên nghe cho 'bấm phím' nhưng đối với 'KeyDown' và 'KeyUp'. Vấn đề là, 'keydown' không hoạt động trong Firefox nên chỉ 'keyup' thực hiện thủ thuật ma thuật khi nghe ESC. ;)

fiddle làm việc: http://jsfiddle.net/aGpNf/190/

SOLUTION UPDATE: Cuối cùng tôi đã phải lắng nghe cả hai sự kiện 'KeyUp' 'KeyDown' và. Bởi vì trong trường hợp của tôi FF không thiết lập lại trường đầu vào trên ESC keydown để trạng thái trước đó, do đó, nó làm sai lệch mô hình của tôi. Vì vậy, 'keyup' xóa mô hình và kiểm tra 'keydown' nếu mô hình trống và thực hiện hành động thích hợp. Tôi cũng cần phải tự Defocus đầu vào để ngăn chặn văn bản popping lại:./

Answer 1

Các chấp nhận câu trả lời does not work cho IE 10/11. Dưới đây là một giải pháp based on another question có quyền này:

Chỉ

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

Nghe 'KeyDown' hoặc 'KeyUp' sự kiện thay vì 'bấm phím':

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

Answer 3

tôi giải quyết vấn đề này như thế này (điều khiển như vm Cú pháp):

HTML

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

khiển

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

Answer 4

On esc nhấn phím IE10/11 theo mặc định xóa textarea .Tính năng trình duyệt.Đối với những người khác chúng ta có thể sử dụng

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 5

tôi đã quản lý để xây dựng một thanh toán bù trừ trực tiếp directiveng-model của yếu tố đầu vào và hoạt động bình thường cũng trong Firefox. Cho rằng tôi cần phải kiểm tra xem giá trị đã được xóa (modelGetter(scope)) và cũng quấn chuyển nhượng cho phương pháp zero $timeout (để áp dụng nó trong cuộc gọi thông báo tiếp theo).

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

tài sản $ tôi là jQuery, cảm thấy tự do để thay thế nó với magic number27.

Answer 6

góc 2 phiên bản mà cũng cập nhật ngModel

Chỉ

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

} 

Cách sử dụng

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

Answer 7

Còn bây giờ, với v4 kiễu góc, hoạt động này: (keyup.esc)="callback()"