使用JS监听键盘按下事件（keydown event）

1、监听全局键盘按下事件，例如监听全局回车事件

　　$(document).keydown(function(event){if(event.keyCode == 13){alert('你按下了Enter'); }});

2、监听某个组件键盘按下事件，例如监听id为btn的button组件的回车按下事件

　　$("#btn").keydown(function(event){if(event.keyCode == 13){alert('你按下了Enter'); }});

3、如果是要监听组合键，例如监听ctrl+c

　　$(document).keyup(function(event){ if (event.ctrlKey && event.keyCode === 67){ alert('你按下了CTRL+C'); } });

4、详细keyCode值列表

当按键事件触发后,页面没有变化的解决
强制渲染页面

 $scope.$apply();

实际案例:

利用ctrl+shift+alt+z控制登录方式切换,按键顺序不能分先后

<!--ng-hide="myzh" 重点--><!-- 账号登录 --><div ng-hide="myzh"><div class="input-div"><div style="float: left; width: 16px;height: 16px;margin-top: 22px;margin-left: 22px"><img style="width:100%;height:100%" src="resources/theme/default/image/user.svg" /></div><input id="username" type="text" onkeypress="keypress(event)" autocomplete="off" placeholder='{{"USERNAME.ENTER"|translate}}' class="input-box" onclick="inputfocus(event)" onpropertychange="nameChange(event)" oninput="nameChange(event)"/></div><div class="input-div"><div style="float: left; width: 16px;height: 16px;margin-top: 22px;margin-left: 22px"><img style="width:100%;height:100%" src="resources/theme/default/image/lock.svg" /></div><input id="password" type="password" onkeypress="keypress(event)" autocomplete="off" placeholder='{{"PASSWORD.ENTER"|translate}}' class="input-box" onclick="inputfocus(event)" /></div><div id="login-error" class="login-error"></div><div class="login-btn" title="登录" onclick="ToSubmit()">登&nbsp;&nbsp;录</div><div style="display: none" class="login-help"><div class="login-forget-password" ng-click="forgetPassword()">忘记密码</div></div></div><!-- PKI登录 --><div ng-hide="mypki"><div style="width: 200px;height: 200px;margin-left: calc(50% - 100px);margin-top: 46px"><img src="resources/theme/default/image/pki.svg"></div><!--<div style="cursor: pointer;width: 200px;height: 29px;margin-left: calc(50% - 100px);margin-top: 53px;text-align: center;font-size: 21px;color: #FFFFFF;font-weight: 500" οnclick="pkiLogin()">使用数字证书登录</div>--><div class="login-btn-pki" title="使用数字证书登录" onclick="pkiLogin()">使用数字证书登录</div></div>

     $scope.myzh=true;$scope.mypki=false;$scope.toggle = function (){$scope.myzh = !$scope.myzh;$scope.mypki = !$scope.mypki;$scope.$apply();}var shuzi = new Set()$(document).keydown(function(event){event.preventDefault();if (shuzi.size!=4){if (90 == event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ){shuzi.add(event.keyCode)console.log(shuzi)if (shuzi.size==4){$scope.toggle();}}}});$(document).keyup(function(event){event.preventDefault();if (shuzi.has(event.keyCode)){shuzi.delete(event.keyCode)}});

使用JS监听键盘按下事件（keydown event）相关推荐

Python监听键盘和鼠标事件，并发送内容至邮箱！
一. 环境以及工具环境:win10,Python3.6 工具:JetBrains PyCharm 2018.1.4 二. 使用的第三方库: import os import smtplib #发送邮 ...
JS 进阶: 深入理解键盘事件 Keyboard Event
JS 进阶: 深入理解键盘事件 Keyboard Event 文章目录 JS 进阶: 深入理解键盘事件 Keyboard Event 正文 1. 基础 API 2. 基础事件:keydown.keyu ...
JS监听键盘组合事件
起因今天看到一个需求,要是使用Alt+A快捷键实现某个功能. 可以监听键盘的事件 keydown keyup keypress都可以监听键盘事件. 他们之间的区别在于: keypress只能捕捉单个 ...
js 监听键盘的enter键
// js 版本window.οnlοad=function(){document.onkeydown=function(ev){var event=ev ||eventif(event.keyCod ...
惊艳！可视化的 js：动态图演示 - 事件循环 Event Loop
原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 原文作者:Lydia Hallie 译者:夜尽天明译者博客 ...
js中了解什么是事件对象event
event就是一个事件对象写在侦听函数(鼠标点击经过.function)的小括号里面当形参来看也可简写为e 事件对象是系统自动创建的不用传递参数是事件一系列相关数据的集合跟事件相关的如 ...
Ext JS学习第十六天事件机制event（一）
此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus. ...
js实现手机端滑动事件 touch event
①touchstart是点击触发 ②touchmove是监听触摸轨迹,会反复触发多次 ③touchend则是触摸结束时触发在做图片滚动时,需要计算滑动距离而非滑动轨迹因此只利用①+③即可 let ...
html键盘事件监听,react怎样监听键盘事件
react监听键盘事件的方法:React中有监听键盘按下事件onKeyUp或者onKeyDown属性(以下用onKeyUp),值为自定义方法keyUp,即onKeyUp={this.keyUp}. 通 ...
js实现监听键盘的收起和弹出
之前遇到一个bug,前提因素: 1. vue项目 2. 弹出层popup 3. ios手机 4. 弹出层中的input获取焦点后点击键盘上的"完成"按钮收起键盘,再次触发inpu ...

使用JS监听键盘按下事件（keydown event）

实际案例:

使用JS监听键盘按下事件（keydown event）相关推荐

最新文章

热门文章