点击AngularJS后如何检测按键

前端之家收集整理的这篇文章主要介绍了点击AngularJS后如何检测按键前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在web应用程序上使用angularjs,我需要弄清楚,如果我点击某些地方,我可以检测到像ctrl,shift或alt这样的键.

例如,使用jquery,我可以通过访问Click函数参数来做到这一点.

有没有一些开箱即用的方式来获取有关角度的信息?

看看这个美丽的东西关于 AngularJS key handling

所以键盘代码为Ctrl,Shift,alt会是

Ctrl – 17
Alt – 18
Shift – 16

Working Demo

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="angular.js"></script>
  5. <script src="script.js"></script>
  6. </head>
  7.  
  8. <body ng-app="mainModule">
  9. <div ng-controller="mainController">
  10. <label>Type something:
  11. <input type="text"
  12. ng-keydown="onKeyDown($event)"
  13. ng-keyup="onKeyUp($event)"
  14. ng-keypress="onKeyPress($event)" />
  15. </label><br />
  16. <strong>KEY DOWN RESULT:</strong> {{onKeyDownResult}}<br />
  17. <strong>KEY UP RESULT:</strong> {{onKeyUpResult}}<br />
  18. <strong>KEY PRESS RESULT:</strong> {{onKeyPressResult}}
  19. </div>
  20. </body>
  21. </html>

脚本

  1. angular.module("mainModule",[])
  2. .controller("mainController",function ($scope)
  3. {
  4. // Initialization
  5. $scope.onKeyDownResult = "";
  6. $scope.onKeyUpResult = "";
  7. $scope.onKeyPressResult = "";
  8.  
  9. // Utility functions
  10.  
  11. var getKeyboardEventResult = function (keyEvent,keyEventDesc)
  12. {
  13. return keyEventDesc + " (keyCode: " + (window.event ? keyEvent.keyCode : keyEvent.which) + ")";
  14. };
  15.  
  16. // Event handlers
  17. $scope.onKeyDown = function ($event) {
  18. $scope.onKeyDownResult = getKeyboardEventResult($event,"Key down");
  19. };
  20.  
  21. $scope.onKeyUp = function ($event) {
  22. $scope.onKeyUpResult = getKeyboardEventResult($event,"Key up");
  23. };
  24.  
  25. $scope.onKeyPress = function ($event) {
  26. $scope.onKeyPressResult = getKeyboardEventResult($event,"Key press");
  27. };
  28. });

猜你在找的Angularjs相关文章