当前位置: 首页 > news >正文

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到570到9
65到90a到z(A到Z)
112到135F1到F24
8BackSpace(退格)
9Tab
13Enter(回车)
20Caps_Lock(大写锁定)
32Space(空格键)
37Left(左箭头)
38Up(上箭头)
39Right(右箭头)
40Down(下箭头)

keyCode 码值对照表

需要注意的是,上面这种情况是使用 uni-app 开发应用,编译到 H5 的情况,不一定适用于小程序和 APP 开发。

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

http://www.lryc.cn/news/185150.html

相关文章:

  • 【juc】countdownlatch实现并发网络请求
  • 在供应链管理中,如何做好库存分析?库存分析有哪些监控指标?
  • 黑豹程序员-架构师学习路线图-百科:Database数据库
  • 你相信光吗?黑灯工厂重新相信“光”
  • Ubuntu 20.04使用源码安装nginx 1.14.0
  • springboot框架拦截器中HttpServletRequest 请求如何区分是图片上传流还是普通的字符流?
  • 简单聊聊 TCP 协议
  • 钡铼BL124PN:简单快速转换Profinet到Ethernet/IP
  • 【golang】go 空结构体 详解 空结构体内容占用及大小
  • 身为产品经理该如何向客户推广API商品数据接口
  • 【数据结构】460. LFU 缓存
  • 文字转语音播报模块(一):阿里云nls服务使用示例
  • Vscode配置C#编程环境(win10)
  • python:xlrd 读取 Excel文件,显示在 tkinterTable 表格中
  • 深度学习——深度学习计算一
  • yolov5及yolov7实战之剪枝
  • 力扣第257题 二叉树的所有路径 c++ 树 深度优先搜索 字符串 回溯 二叉树
  • 保研之旅·终
  • 达梦数据库 视图 错误 [22003]: 数据溢出
  • 【文献阅读】【NMI 2022】LocalTransform :基于广义模板的有机反应性准确预测图神经网络
  • QQ浏览器怎么才能设置默认搜索引擎为百度
  • Go Gin Gorm Casbin权限管理实现 - 3. 实现Gin鉴权中间件
  • js 封装一个异步任务函数
  • 目标检测YOLO实战应用案例100讲-基于无人机航拍图像的目标检测
  • PyQt5配置踩坑
  • 内网渗透笔记之内网基础知识
  • vue3+elementPlus:el-select选择器里添加按钮button
  • Android 模拟点击
  • css自学框架之选项卡
  • Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup