JavaScript监听键盘事件代码实现


Posted in Javascript onJune 03, 2020

在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧。

监听方式

键盘事件往往是全局监听,设监听的函数为keyboard()。

keyup事件类型。该类型触发条件为按键按下去并松开。

//长按并松开只触发一次
document.addEventListener('keyup', keyboard);
document.onkeyup = keyboard; //记得不要加括号!

keydown事件类型。该类型触发条件为按键按下去。

//长按可以触发多次
document.addEventListener('keydown', keyboard);
document.onkeydown = keyboard;

keypress事件类型。该类型触发条件为按键按下去且产生了字符。

//长按可以触发多次
//遇到'1','a',回车等按键可以触发,但del键,向上键等则不会
document.addEventListener('keypress', keyboard);
document.onkeypress = keyboard;

需要注意的是:keypress的兼容性并不是很好,比如安卓系统就不支持,所以尽量避免使用。
onkey___ 和 addEventListener之间,最好选后者。

另外,如果keyboard不带参,则监听的事件是任何符合条件的按键,即只要你按了键盘,就会触发事件。

监听具体事件(即按了哪个键)

上文提到的keyboard函数是可以设形参的,且在调用的时候不需加实参。

function keyboard(eve) {
...
}
document.onkeyup = keyboard; //不需要加参数和括号

此时的eve便是键盘事件类型的变量,它有以下属性:

属性 意义
key 事件对应按钮的字符
keyCode 事件对应按钮的Unicode码
which 事件对应按钮的Unicode码

其中,不同的浏览器对keyCode和which的支持情况是不同的,下文会有关于提升兼容性的方法。

举个例子:

<p id="msg1"></p>
<p id="msg2"></p>

<script>
	function keyboard(eve) {
		msg1.textContent += eve.key;
		msg2.textContent += eve.keyCode || eve.which;
 		//该方法可以提升代码的兼容性
	}
	document.onkeyup = keyboard;
</script>

input:
a

output:
a
65

需要注意的是:key属性的兼容性并不高,最好是先获取Unicode码,再转成对应字符。

let x = eve.keyCode || eve.which;
let key = String.fromCharCode(x);

想知道某个按键的Unicode码,可以查手册,也可以在控制台中试验。
简单点的可以用ASCII码来顶着 https://www.runoob.com/tags/html-ascii.html 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
微信小程序实现日历签到
Sep 21 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
深入分析jQuery.one() 函数
Jun 03 #jQuery
layui实现显示数据表格、搜索和修改功能示例
Jun 03 #Javascript
微信小程序文章详情功能完整实例
Jun 03 #Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 #Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
Angular8 简单表单验证的实现示例
Jun 03 #Javascript
You might like
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
js常用DOM方法详解
2017/02/04 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
如何通过python计算圆周率PI
2020/11/11 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
财务内勤岗位职责
2014/04/17 职场文书
2014年三万活动总结
2014/04/26 职场文书
活动倡议书范文
2014/05/13 职场文书
工作检讨书怎么写
2014/10/10 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android