48

如何在 AngularJS 中检测 onKeyUp？

我正在寻找一个类似于 ngChange 的“ngOnkeyup”指令，但我找不到任何合适的东西。

如果没有这样的指令，是否有一种干净的方法可以从浏览器原生 onkeyup 事件调用控制器？

4

8 回答 8

77

对于今天寻找该功能的每个人，请使用官方ng-keyup指令：

<input type="text" ng-keyup="{expression}" />
于 2013-08-30T13:57:54.413 回答
69

编辑：见下面来自 maklemenz 的第二个答案，它指的是新的内置 ng-keyup 指令

您可以使用angular-ui 库：

使用 angular-ui，你可以做到

<input ui-event="{keyup: 'myFn($event)'}"

如果您不想使用其他库，最有效和最简单的方法是：

JS

myApp.directive('onKeyup', function() {
  return function(scope, elm, attrs) {
    elm.bind("keyup", function() {
      scope.$apply(attrs.onKeyup);
    });
  };
});

HTML：

<input on-keyup="count = count + 1">

编辑：如果您想检测按下了哪个键，您实际上有两个基本选项。您可以向指令添加一个属性来处理指令中允许的键，或者您可以将按下的键传递给您的控制器。我通常会推荐该指令处理关键方法。

这是两种方式的示例：http: //jsfiddle.net/bYUa3/2

于 2012-06-29T18:41:07.210 回答
7

如果默认指令还不够，您必须创建自定义指令。像这样的东西，可能是？

<!doctype html>
<html lang="en" ng-app="app">
  <body ng-controller="ctrl">
    <input ng-onkeyup="keyup()"/>
    <script src="js/lib/angular-1.0.0.min.js"></script>
    <script>
      angular.module('app', []).directive('ngOnkeyup', function() {
        return {
          restrict: 'A',
          scope: {
            func: '&ngOnkeyup'
          },
          link: function( scope, elem, attrs ) {
            elem.bind('keyup', scope.func);
          }
        };
      });

      function ctrl($scope) {
        $scope.keyup = function() {
          alert('keyup fired');
        };
      }
    </script>
  </body>
</html>
于 2012-06-29T18:37:20.143 回答
5

除了已经提到的事件绑定器之外，您现在还可以在 Angular UI 中使用这些方便的 ui-key* 指令：

<textarea
 ui-keypress="{13:'keypressCallback($event)'}">
</textarea>
<textarea
  ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
</textarea>
<textarea
  ui-keyup="{'enter':'keypressCallback($event)'}">
</textarea>

<script>
$scope.keypressCallback = function($event) {
alert('Voila!');
$event.preventDefault();
};
</script>

http://angular-ui.github.io/#/directives-keypress

于 2013-04-09T00:34:46.300 回答
5

只是为了帮助那些像我一样只想在某个键上触发事件的人。这是当且仅当按下转义时ng-keyup调用我的函数的代码。cancel()要找出您想要的键码，请查看此网站

ng-keyup="$event.keyCode == 27 ? cancel() : ''"

请注意，正如@maklemenz 提到的，这使用了现在可用的内置 Angular 指令

于 2014-11-26T16:54:43.143 回答
0

如果我正确理解您的问题，那么您正在寻找 ng-keyup 指令。这是一个链接：http ://docs.angularjs.org/api/ng.directive:ngKeyup

于 2013-09-12T14:42:55.573 回答
0

仅供参考 - 我今天只是在搜索这个，看来 Angular 的 github 中有一个分支可以解决 keyup keydown 的问题。

https://github.com/angular/angular.js/pull/1622

它已被合并到 master 中......但是它看起来不会出现在 1.1.3 之前的版本中

为了使用 ng-keyup 选项构建角度，您可以从 git 下载代码并rake package在文件夹上运行。当然在 Windows 上意味着安装 Node.js 和 Ruby 以及可能的其他一些箍（我在 win32 上遇到了 fork 错误）

不过，我最终确实得到了“内置”键。

于 2013-01-31T20:21:38.777 回答
0

我知道我的回答为时已晚，但我希望它对某些人有所帮助。如果您正在寻找一种快速简便的方法，您可以使用以下方法：

 // in the controller
    
    // get element by id, you can use by class...
    var element = angular.element('#element');
    
    element.keyup(function () {
    console.log('keyup fired');
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<input id="element" type="text" />

于 2018-08-10T23:14:22.800 回答