uni-app 开发中,监听 input 键盘事件获取不到按下按键值怎么办?

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 开发。

原文:https://www.uniappbug.com/p29

猜你喜欢

转载自blog.csdn.net/weixin_45583710/article/details/133647912