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
相关文章:
uni-app 开发中,监听 input 键盘事件获取不到按下按键值怎么办?
uniapp 开发 H5 时,无法监听按钮键盘事件的原因以及解决方法。 问题描述: 不少 uni-app 开发者在使用 input 组件时,监听 keyup 事件时,获取不到键盘的 keyCode。编写的代码如下: <template><input keyup&…...
【juc】countdownlatch实现并发网络请求
目录 一、截图示例二、代码示例2.1 测试代码2.2 接口代码 一、截图示例 二、代码示例 2.1 测试代码 package com.learning.countdownlatch;import lombok.extern.slf4j.Slf4j; import org.springframework.web.client.RestTemplate;import java.util.Arrays; import java.uti…...
在供应链管理中,如何做好库存分析?库存分析有哪些监控指标?
在供应链管理中,库存分析是其重要的一环。库存分析的方法繁杂且广泛,选择正确的方法才能更好的进行库存分析,下面就为大家盘点一些常用的库存分析方法和监控指标,全程干货,建议收藏! 01 如何进行库存分析&…...
黑豹程序员-架构师学习路线图-百科:Database数据库
文章目录 1、什么是Database2、发展历史3、数据库排行网4、总结 1、什么是Database 当今世界是一个充满着数据的互联网世界,各处都充斥着大量的数据。即这个互联网世界就是数据世界。 支撑这个数据世界的基石就是数据库,数据库也可以称为数据的仓库。 …...
你相信光吗?黑灯工厂重新相信“光”
你知道“黑灯工厂”吗?望文生义,所谓黑灯工厂,就是可以不需要照明的工厂。全程流水线自动化生产,无人干预、无人值守,工厂变成黑匣子,原材料进去,成品出来,流水线上百分百自动化。 完…...
Ubuntu 20.04使用源码安装nginx 1.14.0
nginx安装及使用(详细版)是一篇参考博文。 http://nginx.org/download/可以选择下载源码的版本。 sudo wget http://nginx.org/download/nginx-1.14.0.tar.gz下载源代码。 sudo tar xzf nginx-1.14.0.tar.gz进行解压。 cd nginx-1.14.0进入到源代码…...
springboot框架拦截器中HttpServletRequest 请求如何区分是图片上传流还是普通的字符流?
在Spring Boot框架中的拦截器(Interceptor)中,可以通过检查Content-Type请求头来区分图片上传流和普通的字符流。 当客户端发送POST请求并携带文件时,Content-Type请求头通常会包含multipart/form-data或者类似的值。这表明该请求…...
简单聊聊 TCP 协议
简单聊聊 TCP 协议 如何实现可靠传输 ?完全可靠存在比特差错存在丢包流水线可靠数据传输协议回退N步 (GBN)选择重传 (ARQ) 小结 TCPTCP 连接报文段结构序号和确认号 可靠数据传输避免重传超时时间加倍快速重传回退N步还是选择重传 流量控制连接管理拥塞控制拥塞原因拥塞控制方…...
钡铼BL124PN:简单快速转换Profinet到Ethernet/IP
钡铼技术BL124PN是一款高性能的Profinet转Ethernet/IP网关设备。该网关专为工业自动化领域设计,用于实现不同协议之间的互连和通信。BL124PN采用可靠稳定的硬件和先进的通信技术,具有以下主要特点: 协议转换能力:BL124PN能够将Pr…...
【golang】go 空结构体 详解 空结构体内容占用及大小
一、空结构体基础 空结构实例 和 空结构体变量 本质是一样的 1、所有空结构体地址都是一样的2、大小都为0(最独特的) package mainimport ("fmt""time""unsafe" )type EST struct { }func main() {// 一、基础// 空结构…...
身为产品经理该如何向客户推广API商品数据接口
在当今数字化的时代,API(Application Programming Interface,应用程序编程接口)已成为各种软件应用程序之间交互数据的主要方式。API商品数据接口作为一种特殊类型的API,能够让不同的系统之间共享商品数据,…...
【数据结构】460. LFU 缓存
460. LFU 缓存 解题思路 get操作 返回key对应的val 然后增加对应的freq插入操作 如果key已经存在 直接进行更新 如果不存在 但是容器已经满了 直接进行删除freq最小的Key 之后进行插入 class LFUCache {// key到 val的映射 KVHashMap<Integer,Integer> keyToVal;// …...
文字转语音播报模块(一):阿里云nls服务使用示例
一、业务场景 最近笔者在业务中涉及到语音告警的模块,需要讲告警内容以文件或流形式返回给前端进行语音播报,具体的分析与处理如下 二、业务分析 首先告警内容提示信息这里做的处理是通过专门字段去存储、编辑,根据拟定好的代码逻辑判断是…...
Vscode配置C#编程环境(win10)
目录 1、安装好Vscode 2、下载安装.NetCore SDK 3、配置C#环境 3.1 打开Vscode并下载扩展 3.2 Vscode中打开文件夹并配置环境 3.3 调试运行 1、安装好Vscode 2、下载安装.NetCore SDK 官网如下,下载完成后双击打开一路走到底就行.NetCore SDK官网 软件显示安…...
python:xlrd 读取 Excel文件,显示在 tkinterTable 表格中
pip install xlrd xlrd-1.2.0-py2.py3-none-any.whl (103 kB) 摘要: Library for developers to extract data from Microsoft Excel (tm) spreadsheet files pip install tkinterTable tkintertable-1.3.3.tar.gz (58 kB) 摘要: Extendable table class for Tkinter 源代…...
深度学习——深度学习计算一
深度学习——深度学习计算一 文章目录 前言一、层和块1.1. 自定义块1.2. 顺序块1.3. 在前向传播函数中执行代码1.4. 小结 二、参数管理2.1. 参数访问2.1.1. 目标参数2.1.2. 一次性访问所有参数2.1.3. 从嵌套块收集参数 2.2. 参数初始化2.2.1. 内置初始化2.2.2. 自定义初始化 2.…...
yolov5及yolov7实战之剪枝
之前有讲过一次yolov5的剪枝:yolov5实战之模型剪枝_yolov5模型剪枝-CSDN博客 当时基于的是比较老的yolov5版本,剪枝对整个训练代码的改动也比较多。最近发现一个比较好用的剪枝库,可以在不怎么改动原有训练代码的情况下,实现剪枝的…...
力扣第257题 二叉树的所有路径 c++ 树 深度优先搜索 字符串 回溯 二叉树
题目 257. 二叉树的所有路径 简单 给你一个二叉树的根节点 root ,按 任意顺序 ,返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例 1: 输入:root [1,2,3,null,5] 输出:["1->2-&g…...
保研之旅·终
一.背景 学校: 中211 通信工程专业 成绩: 绩点前3% 英语: CET4:523 CET6:505 竞赛:两个国奖,若干省奖 科研:两项校级大创,无论文产出 二.基本情况 夏令营入营: 哈工大…...
达梦数据库 视图 错误 [22003]: 数据溢出
今天通过DBeaver连接访问达梦数据库的一个视图,报错:错误 [22003]: 数据溢出 经过分析,原因是视图字段的数据类型和原表的数据类型不一致造成的...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
