JavaScript监听键盘事件代码实现

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

监听方式

键盘事件往往是全局监听，设监听的函数为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 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js监听键盘事件的方法_原生和jquery的区别详解

    经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的

  • js监听键盘事件示例代码

    复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8"> var isPiss=0; document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27

  • js和jquery实现监听键盘事件示例代码

    js和jquery实现监听键盘事件示例代码

    项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e

  • 使用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.如果是要监

  • 在JavaScript中监听IME键盘输入事件

    输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触发事件呢?不同的操作系统和不同的浏览器对此有不同的看法.在最糟糕的情况下,用户使用输入法后浏览器就只触发一次 keydown ,之后就没有任何的键盘事件了.这对于 Suggestion 控件的实现来说是个大问题,因为 Suggestion 控件需要监听文本输入框的变化,而事件是最准确也最节省计算资源的做法,如果换成轮询的话性能就可能受到影响. 首先,要监听启用输入法后的击键事件应当使用 keyd

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • JavaScript监听键盘事件代码实现

    在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧. 监听方式 键盘事件往往是全局监听,设监听的函数为keyboard(). keyup事件类型.该类型触发条件为按键按下去并松开. //长按并松开只触发一次 document.addEventListener('keyup', keyboard); document.onkeyup = keyboard; //记得不要加括号! keydown事件类型.该类型触发条件为按键按下去. //长按可以触发多次 document.addEvent

  • iOS应用开发中监听键盘事件的代码实例小结

    1.注册监听键盘事件的通知 复制代码 代码如下: [[NSNotificationCenter defaultCenter] addObserver:self                                              selector:@selector(keyboardWillShow:)                                                  name:UIKeyboardWillShowNotification   

  • vue监听键盘事件的快捷方法【推荐】

    在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: <input v-on:keyup.13="submit"> 对于一些常用键,还提供了按键别名: <input @keyup.enter="submit"> <!-- 缩写形式 --> 全部的按键别名: .enter  .tab  .delete (捕获"删除"和"退格"键)  .esc  .s

  • vue监听键盘事件的相关总结

    vue监听键盘事件的相关总结

    按键修饰符 在监听键盘事件时,我们经常需要检查详细的按键.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符. <input v-on:keyup.page-down=&quo

  • javascript 动态添加事件代码

    方法一.setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet

  • Python监听键盘和鼠标事件的示例代码

    Python监听键盘和鼠标事件的示例代码

    我们可以利用windows提供的api函数来实现对系统键盘事件和鼠标事件的监听,主要利用的是SetWindowsHookEx函数,这个函数可以允许调用者传入一个钩子函数也叫回调函数,当指定的事件发生时,你 传入的函数就会被触发,有些事件是进程级的,有些事件是系统级的,这里我们用WH_KEYBOARD_LL来监听系统键盘事件,用WH_MOUSE_LL来监听鼠标事件,注意不是WH_KEYBOARD,使用WH_KEYBOARD是无法监听到外部 程序的事件的,这个可以在windows官方文档里面看到说明

随机推荐