Clear input text field in Angular / AngularUI with ESC key
Listen for 'keydown' or 'keyup' events instead of 'keypress':
<input ng-model="search.query" ui-keydown="{esc: 'keyCallback($event)'}" />
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 = "";
}
}
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;
};