百度网站建设制作公司,网站建设的基本流程包括哪些,企业简介模板图片,自己建网站卖鞋uniapp 开发 H5 时#xff0c;无法监听按钮键盘事件的原因以及解决方法。
问题描述#xff1a;
不少 uni-app 开发者在使用 input 组件时#xff0c;监听 keyup 事件时#xff0c;获取不到键盘的 keyCode。编写的代码如下#xff1a;
templateinput keyup无法监听按钮键盘事件的原因以及解决方法。
问题描述
不少 uni-app 开发者在使用 input 组件时监听 keyup 事件时获取不到键盘的 keyCode。编写的代码如下
templateinput keyuphandleKeyUp
/template
但是在 handleKeyUp() 方法里获取不到键盘的编码出现这个问题的原因是 uni-app 的内置组件 input 其实是封装过的编译为 h5 时不是 html 原生的 input 元素所以才无法监听原生的键盘事件。
解决方法
原理和 Vue 的组件事件监听是一样的只需要在监听事件的指令上加上 .native 指令就可以监听原生的键盘事件了修改后的代码如下
templateinput keyup.nativehandleKeyUp
/template
这时就拿到键盘 code 值了。
附 keyCode 码值对照表
keyCode实际键值48到570到965到90a到zA到Z112到135F1到F248BackSpace退格9Tab13Enter回车20Caps_Lock大写锁定32Space空格键37Left左箭头38Up上箭头39Right右箭头40Down下箭头
keyCode 码值对照表
需要注意的是上面这种情况是使用 uni-app 开发应用编译到 H5 的情况不一定适用于小程序和 APP 开发。
原文https://www.uniappbug.com/p29
