加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

点击AngularJS后如何检测按键

发布时间:2020-12-17 07:47:38 所属栏目:安全 来源:网络整理
导读:我在web应用程序上使用angularjs,我需要弄清楚,如果我点击某些地方,我可以检测到像ctrl,shift或alt这样的键. 例如,使用jquery,我可以通过访问Click函数参数来做到这一点. 有没有一些开箱即用的方式来获取有关角度的信息? 看看这个美丽的东西关于 AngularJS
我在web应用程序上使用angularjs,我需要弄清楚,如果我点击某些地方,我可以检测到像ctrl,shift或alt这样的键.

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

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

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

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

Ctrl – 17
Alt – 18
Shift – 16

Working Demo

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <label>Type something:
      <input type="text"
             ng-keydown="onKeyDown($event)"
             ng-keyup="onKeyUp($event)"
             ng-keypress="onKeyPress($event)" />
    </label><br />
    <strong>KEY DOWN RESULT:</strong> {{onKeyDownResult}}<br />
    <strong>KEY UP RESULT:</strong> {{onKeyUpResult}}<br />
    <strong>KEY PRESS RESULT:</strong> {{onKeyPressResult}}
  </div>
</body>
</html>

脚本

angular.module("mainModule",[])
  .controller("mainController",function ($scope)
  {
    // Initialization
    $scope.onKeyDownResult = "";
    $scope.onKeyUpResult = "";
    $scope.onKeyPressResult = "";

    // Utility functions

    var getKeyboardEventResult = function (keyEvent,keyEventDesc)
    {
      return keyEventDesc + " (keyCode: " + (window.event ? keyEvent.keyCode : keyEvent.which) + ")";
    };

    // Event handlers
    $scope.onKeyDown = function ($event) {
      $scope.onKeyDownResult = getKeyboardEventResult($event,"Key down");
    };

    $scope.onKeyUp = function ($event) {
      $scope.onKeyUpResult = getKeyboardEventResult($event,"Key up");
    };

    $scope.onKeyPress = function ($event) {
      $scope.onKeyPressResult = getKeyboardEventResult($event,"Key press");
    };
  });

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读