使用ESC鍵在AngularUI中清除輸入文本字段

在我的Angular應用程序的幾個地方，我需要使用ESC鍵清除用戶的輸入。問題是，我不知道如何使用文本輸入字段（textarea清除OK）。看到這個小提琴：使用ESC鍵在AngularUI中清除輸入文本字段

綁定：

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

回調使用：

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

任何人都可以，請找出什麼，我需要做的，清晰的文本輸入用ESC鍵？

SOLUTION： 作爲勸通過bmleite，你不應該聽 '按鍵' 但'的keydown'和'KEYUP'。問題在於，'keydown'在Firefox中不起作用，所以只有'keyup'才能聽取ESC的魔術。 ;）

工作小提琴：http://jsfiddle.net/aGpNf/190/

SOLUTION UPDATE： 最後，我不得不聽都 '的keydown' 和 'KEYUP' 事件。因爲在我的情況下，FF會將ESC keydown上的輸入字段重置爲之前的狀態，所以它會混淆我的模型。所以'keyup'清除模型，'keydown'檢查模型是否爲空並執行適當的操作。我還需要手動散焦輸入防止文本彈出回來：/

來源

2013-02-01 smajl

你能解釋一下你意思是解決方案更新？聽起來好像它會幫助你，如果AngularUI將你的keyup包裝在'$ scope。$ apply（）'中？如果是這種情況，你可以開一個問題嗎？我也很好奇你的意思是文本彈出回來嗎？此外，您可以執行以下操作：'ui-keydown =「{'esc enter'：'keyCallback（$ event）'}」'任一鍵都將觸發事件。 – ProLoser

如果有人來到這裏，只是無法讓Chrome在Chrome中觸發...關閉Vimium插件或其他。 –

這似乎不再適用於Chrome或Firefox。我沒有在IE/Edge或Opera中測試過。 –

接受的答案does not work的IE 10/11。這裏是一個解決方案based on another question，做：

指令

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

來源

2014-11-20 16:11:46

[eval is evil]（https://jslinterrors.com/eval-is-evil），你可以使用'＆'將方法綁定到指令，更多信息[here]（https：//docs.angularjs .ORG /導向/指令）。 – icl7126

我非常喜歡這個，在將它用於一堆東西之後，我繼續爲它做回購。 https://github.com/deltreey/angular-esc-key如果您願意，我會將其轉移給您，但我很樂意保留它。 – deltree

隨意做，我不介意。當我有時間的時候，我還會嘗試通過@ icl7126來改進解決方案，併發送一個請求。此外，如果你有改進，隨時更新我的答案。 –

傾聽「的keydown」或「KEYUP」事件，而不是「按鍵」：

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

來源

2013-02-01 13:59:11 bmleite

謝謝你讓我走上正確的道路。在寫這個問題之前，我嘗試過'keydown'，但它在FF中不起作用，所以我認爲這不會是正確的解決方案。在你的建議之後，我也嘗試了'keyup'，並說它做了伎倆（FF和Chrome）。 – smajl

您也可以直接按內聯鍵進行操作：'Esc：'search.query = \「\」'}「' – ProLoser

按下Esc鍵時不會觸發按鍵事件。使用keydown/keyup可以完成這項工作。 – Vivek

我解決這個問題是這樣的（控制器VM語法）：

HTML

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

控制器

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

來源

2015-03-24 01:41:10 Bijan

在ESC按鍵IE10/11默認清除textarea的。它是一個瀏覽器功能。對於其他人，我們可以使用

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

來源

2015-06-11 09:55:41 Sagittarius

我已經成功地建立一個directive結算input元素直接ng-model和正常工作的同時在Firefox。爲此，我需要檢查該值是否已被清除（modelGetter(scope)），並且還將該分配包裝爲零$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); 
     } 
     }); 
    } 
    }; 
}]);

我$屬性爲jQuery，隨時與magic number27來取代它。

來源

2015-11-07 00:29:24 icl7126

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

來源

2017-07-14 17:19:05

現在，具有角V4，這個工程：(keyup.esc)="callback()"

來源

2017-10-21 13:08:41 ktretyak

使用ESC鍵在AngularUI中清除輸入文本字段

回答

相關問題