键盘事件(Keyboard Events)
属性 | 值 | 描述 |
onkeydown | script | 当按下按键时运行脚本 |
onkeypress | script | 当按下并松开按键时运行脚本 |
onkeyup | script | 当松开按键时运行脚本 |
js中获取键盘事件
onkeydown 获取用户按下的键
下面是一个利用 onkeydown 事件获取用户按下键盘按键信息的例子:
代码如下:
< html>
< body>
< script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
< input type="text" οnkeydοwn="return noNumbers(event)" />
< /body>
< /html>
提示
Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which。
如上面例子所示,event.keyCode/event.which 得到的是一个按键对应的数字值(Unicode 编码),常用键值对应如下:
数字值 | 实际值键 |
48到57 | 0到9 |
65到90 | a到z(A到Z) |
112到135 | F1到F24 |
8 | BackSpace(退格) |
9 | Tab |
13 | Enter(回车) |
20 | Caps_Lock(大写锁定) |
32 | Space(空格键) |
37 | Left(左箭头) |
38 | Up(上箭头) |
39 | Right(右箭头) |
40 | Down(下箭头) |
在 Web 应用中,常常可以看到利用 onkeydown 事件的 event.keyCode/event.which 来获取用户的一些键盘操作,从而运行某些运用的例子。如在用户登录时,如果按下了大写锁定键(20),则加以提示大写锁定;在有翻页的时候,如果用户按下左右箭头,触发上下翻页等。
获得 Unicode 编码值之后,如果需要得到实际对应的按键值,可以通过 Srting 对象的 fromCharCode 方法(String.fromCharCode())获得。注意,对于字符获得的始终是大写字符,而对于其他一些功能按键,得到的字符可能不太易阅读。
————————————————
别名 | 实际键值 |
---|---|
.delete | delete(删除)/BackSpace(退格) |
.tab | Tab |
.enter | Enter(回车) |
.esc | Esc(退出) |
.space | Space(空格键) |
.left | Left(左箭头) |
.up | Up(上箭头) |
.right | Right(右箭头) |
.down | Down(下箭头) |
.ctrl | Ctrl |
.alt | Alt |
.shift | Shift |
.meta | (window系统下是window键,mac下是command键) |
另外,Vue中还支持组合写法:
组合写法 | 按键组合 |
---|---|
@keyup.alt.67=”function” | Alt + C |
@click.ctrl=”function” | Ctrl + Click |
created () {
document.onkeydown=(e)=>{
if(86 == e.keyCode && e.ctrlKey){
document.addEventListener('paste', (event)=> {
let paste = (event.clipboardData || window.clipboardData).getData('text');
this.code = paste;
// this.getInfo();
})
}
}
}
原文链接:https://blog.csdn.net/helloxiaoliang/article/details/72686648