键盘绑定事件

键盘中的onkeydown和onkeypress的区别

onkeydown 事件是响应任意键按下的处理(包括功能键),onkeypress 事件只响应字符键按下后的处理。

event.keyCode和event.which的区别

Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which。

通过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" onkeydown="return noNumbers(event)" />
</body>
</html>
fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
通过JS来调用键盘事件

 <script type="text/javascript" language=JavaScript charset="UTF-8">
 2       document.onkeydown=function(event){
 3             var e = event || window.event || arguments.callee.caller.arguments[0];
 4             if(e && e.keyCode==13){ // 按 Enter 
 5                 //要做的事情
 6               }
 7             if(e && e.keyCode==113){ // 按 F2 
 8                  //要做的事情
 9                }            
10         }; 
11 </script>

键码对照表






### Vue.js 键盘事件绑定 在 Vue.js 中,可以利用 `v-on` 指令或者其简写形式 `@` 绑定键盘事件。通过监听特定的按操作(如上下方向),开发者能够轻松实现交互逻辑。 #### 基本语法 Vue 提供了一种简洁的方式来绑定键盘事件。例如,对于输入框中的按操作,可以直接使用如下方式: ```html <input type="text" @keydown="handleKeydown"> ``` 上述代码会监听所有的按事件并调用方法 `handleKeydown`[^1]。 #### 过滤特定按 如果仅希望响应某些特定按,则可以通过修饰符进一步限定行为。比如,当用户按下 Enter 时触发某个函数: ```html <input type="text" @keydown.enter="onEnterPress"> ``` 这里 `.enter` 是 Vue 的内置修饰符之一,专门用来匹配回车的操作[^3]。 同样地,针对箭头(上/下),也可以定义类似的处理机制: ```javascript methods: { handleArrowUp() { console.log('向上箭头被按下了'); }, handleArrowDown() { console.log('向下箭头被按下了'); } } ``` 接着,在模板部分这样声明即可: ```html <div> <input type="text" @keyup.up="handleArrowUp" @keyup.down="handleArrowDown" > </div> ``` 注意这里是用了 `keyup` 而不是 `keydown`,具体选用哪个取决于实际需求以及用户体验设计上的考量。 另外一种更灵活的方式是直接获取原生事件对象,并从中读取 keyCode 或者 key 属性来判断当前按下的究竟是哪一个位: ```html <template> <input type="text" @keydown="keyHandler"> </template> <script> export default { methods: { keyHandler(e) { switch (e.key) { // 可替换为 e.keyCode 如果浏览器兼容性有要求的话 case 'ArrowUp': this.handleArrowUp(); break; case 'ArrowDown': this.handleArrowDown(); break; default: return; } }, handleArrowUp(){ alert("up"); }, handleArrowDown(){ alert("down"); } } }; </script> ``` 此段脚本展示了如何捕获任意按的同时区分不同类型的按动作[^2]。 综上所述,无论是简单的单个按检测还是复杂的组合按解析,Vue 都提供了强大而优雅的支持手段去完成这些任务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值