angularjs之使用 ESC 键清除 Angular/Angular UI 中的输入文本字段_编程设计

在我的 Angular 应用程序的几个地方，我需要使用 ESC 键清除用户的输入。问题是，我不知道如何处理文本输入字段(textarea 清除 OK)。看到这个 fiddle :

jsFiddle demonstration of the problem

捆绑:

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

我使用的回调:

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

任何人都可以，请弄清楚 我需要做什么才能用 ESC 键清除文本输入 ?

解决方案:
根据 bmleite 的建议, 你不应该听 'keypress' 而是听 '按键'和 'keyup' .问题是，'keydown' 在 Firefox 中不起作用，所以只有 'keyup' 做了监听 ESC 的魔术。 ;)

工作 fiddle : http://jsfiddle.net/aGpNf/190/

解决方案更新:
最后，我不得不同时监听 'keydown' 和 'keyup' 事件。因为在我的情况下，FF 确实将 ESC keydown 上的输入字段重置为以前的状态，所以它弄乱了我的模型。所以“keyup”清除模型，“keydown”检查模型是否为空并执行适当的操作。我还需要手动散焦输入以防止文本弹出。:/

请您参考如下方法:

接受的答案 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(); 
      } 
    }); 
    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; 
};