uniapp 开发 H5 时,无法监听按钮键盘事件的原因以及解决方法。
问题描述:
不少 uni-app 开发者在使用 input 组件时,监听 keyup 事件时,获取不到键盘的 keyCode。编写的代码如下:
<template>
<input @keyup="handleKeyUp">
</template>
但是在 handleKeyUp()
方法里获取不到键盘的编码,出现这个问题的原因是 uni-app 的内置组件 <input>
其实是封装过的,编译为 h5 时不是 html 原生的 input 元素,所以才无法监听原生的键盘事件。
解决方法:
原理和 Vue 的组件事件监听是一样的,只需要在监听事件的指令上加上 .native
指令,就可以监听原生的键盘事件了,修改后的代码如下:
<template>
<input @keyup.native="handleKeyUp">
</template>
这时就拿到键盘 code 值了。
附 keyCode 码值对照表
keyCode | 实际键值 |
---|---|
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(下箭头) |
keyCode 码值对照表
需要注意的是,上面这种情况是使用 uni-app 开发应用,编译到 H5 的情况,不一定适用于小程序和 APP 开发。