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

uni-app/vue封装etc车牌照输入,获取键盘按键键值

先看下效果如下:
在这里插入图片描述
动态图如下
在这里插入图片描述
uniapp的keyup获取不到keyCode和compositionstart,compositionend,所以需要监听input节点的keyup事件,

思路以及代码如下:
1.将每一个字符用文本框输入,代码如下

<view class="license-input"><input type="text" class="input-code code0" /><input type="text" class="input-code code1" />...
</view>

2.初始化的时候将input下的真是inputdom绑定keyup事件调用skipnext,并传入每一个input的index,同时绑定compositionstart和compositionend

mounted(){document.querySelectorAll(".input-code").forEach((el, index) => {const input = el.querySelector("input");if (index > 0) {input.disabled = true;}input.addEventListener("keyup", (event) => {this.skipnext(index, event);});input.addEventListener("compositionstart", this.inputstart);input.addEventListener("compositionend", this.inputend);});
}

3.对按键进行处理,如果当前文本框已经输入完成则跳转到下一个文本框,如果没有则停留在当前文本框,第一次输入的时候,前面的没有输入完成,则不可跳过前面的号码去输入后面的号码,当删除后则解除禁止

完整代码如下:
新建license-input.vue文件,

<template><view class="license-input"><input type="text" class="input-code code0" /><input type="text" class="input-code code1" /><span class="dian">·</span><input type="tel" class="input-code code2" /><input type="tel" class="input-code code3" /><input type="tel" class="input-code code4" /><input type="tel" class="input-code code5" /><input type="tel" class="input-code code6" /></view>
</template><script>
/***  车牌照输入* ===== 使用场景 ======* 下单页面ETC**/
export default {name: "license-input",props: {carvalue: {type: String,default: "",},},mounted() {this.setEvent();},methods: {setEvent() {const v = this.carvalue.split("");document.querySelectorAll(".input-code").forEach((el, index) => {const input = el.querySelector("input");input.value = v[index] || "";if (index > 0) {input.disabled = true;}input.addEventListener("keyup", (event) => {this.skipnext(index, event);});input.addEventListener("compositionstart", this.inputstart);input.addEventListener("compositionend", this.inputend);});this.$emit("input", this.carvalue);},getVal() {let val = "";document.querySelectorAll(".input-code").forEach((el, index) => {val += el.querySelector("input").value;});return val;},skipnext(num, e) {const keycode = e.keyCode || e.which;if (e.target.timer) {clearTimeout(e.target.timer);e.target.timer = null;}// tab,ctrl,回车,Enter等可自定排除if (keycode == 9 || keycode == 13 || keycode == 18 || keycode == 32) {return;}//删除按键if (keycode == 8) {if (num > 0 && !e.target.value) {const prevel = document.querySelector(`.code${num - 1}`).querySelector("input");//   e.target.disabled = true; // 删除后将disabled 设置为trueprevel.focus();}this.$emit("input", this.getVal());return;}if (num < 6 && !e.target.hascom) {const nextel = document.querySelector(`.code${num + 1}`).querySelector("input");// 添加延迟,防止过快输入。e.target.timer = setTimeout(() => {nextel.disabled = false;nextel.focus();}, 300);}// 只能输入一个字符if (e.target.value.length > 1 && !e.target.hascom) {e.target.value = e.target.value.substr(e.target.value.length-1, 1);}this.$emit("input", this.getVal());},inputstart(e) {e.target.hascom = true;},inputend(e) {e.target.hascom = false;},},
};
</script>
<style>...</style>

父组件使用

<license-input carvalue="浙A12345" @input="(e) => {carmodel = e}"></license-input>车牌为:{{carmodel }}import licenseInput from "@/components/license-input.vue";

相关文章:

uni-app/vue封装etc车牌照输入,获取键盘按键键值

先看下效果如下&#xff1a; 动态图如下 uniapp的keyup获取不到keyCode和compositionstart&#xff0c;compositionend&#xff0c;所以需要监听input节点的keyup事件&#xff0c; 思路以及代码如下&#xff1a; 1.将每一个字符用文本框输入&#xff0c;代码如下 <view …...

iostat获取IO延迟单位从ms调整us的方案

iostat命令统计的磁盘I/O延迟通常是以毫秒&#xff08;ms&#xff09;为单位&#xff0c;例如在输出中的await字段表示的是平均服务时间&#xff0c;包括等待时间和处理时间&#xff0c;这个值就是以毫秒为单位。 然而&#xff0c;要获取更精确到微秒级别&#xff08;us&#x…...

K8s 源码剖析及debug实战之 Kube-Scheduler(四):预选算法详解

文章目录 0. 引言1. 回顾2. podFitsOnNode 为什么执行两次预选3. 预选算法有哪些4. 参考 0. 引言 欢迎关注本专栏&#xff0c;本专栏主要从 K8s 源码出发&#xff0c;深入理解 K8s 一些组件底层的代码逻辑&#xff0c;同时借助 debug Minikube 来进一步了解 K8s 底层的代码运行…...

ES6之解构赋值详解

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…...

UntiyShader(五)属性、内置文件和变量

目录 一、如何使用属性 例子 ShaderLab中的属性的类型和Cg中的变量的类型之间的匹配关系 二、Unity提供的内置文件和变量 内置的包含文件 内置的变量 一、如何使用属性 在一开始我们提到过&#xff0c;材质和UnityShader之间有着密切的练习&#xff0c;我们可以通过材质面…...

Pytorch简介

1.1 Pytorch的历史 PyTorch是一个由Facebook的人工智能研究团队开发的开源深度学习框架。在2016年发布后&#xff0c;PyTorch很快就因其易用性、灵活性和强大的功能而在科研社区中广受欢迎。下面我们将详细介绍PyTorch的发展历程。 在2016年&#xff0c;Facebook的AI研究团队…...

亚马逊云科技Amazon Q,一款基于生成式人工智能的新型助手

近日&#xff0c;亚马逊云科技宣布推出Amazon Q&#xff0c;这是一款基于生成式人工智能&#xff08;AI&#xff09;的新型助手&#xff0c;专为辅助工作而设计&#xff0c;可以根据您的业务量身定制。通过连接到公司的信息存储库、代码、数据和企业系统&#xff0c;可以使用Am…...

骑砍战团MOD开发(29)-module_scenes.py游戏场景

骑砍1战团mod开发-场景制作方法_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Cw411N7G4/ 一.骑砍游戏场景 骑砍战团中进入城堡,乡村,战斗地图都被定义为场景,由module_scenes.py进行管理。 scene(游戏场景) 天空盒(Skyboxes.py) 地形(terrain code) 场景物(scene_…...

ROS学习记录:ROS系统中的激光雷达消息包的数据格式

一、在工作空间中输入source ./devel/setup.bash 二、输入roslaunch wpr_simulation wpb_simple.launch打开机器人仿真环境 三、机器人仿真环境打开成功 四、给机器人围上一圈障碍物 五、再打开一个工作空间终端 六、输入roslaunch wpr_simulation wpb_rviz.launch打开RViz 七、…...

Vue.js和Node.js的关系--类比Java系列

首先我们看一张图 这里我们类比了Java的jvm和JavaScript的node.js。 可以看到&#xff0c;node.js是基础&#xff0c;提供了基础的编译执行的能力。vue,js是实际上定义了一种他自己的代码格式&#xff0c;以加速开发。...

我的笔记本电脑死机问题折腾记录

两年前&#xff0c;买了一台笔记本电脑。直到今年4月份&#xff0c;不到两年的时间&#xff0c;便出现了花屏的情况&#xff0c;然后就到官方售后去维修&#xff0c;换屏。然后在6月份&#xff0c;屏幕问题再次出现&#xff0c;又去售后维修。 经过两次维修&#xff0c;笔记本…...

uniApp中uView组件库的丰富布局方法

目录 基本使用 #分栏间隔 #混合布局 #分栏偏移 #对齐方式 API #Row Props #Col Props #Row Events #Col Events UniApp的uView组件库是一个丰富的UI组件库&#xff0c;提供了各种常用的UI组件和布局方法&#xff0c;帮助开发者快速构建美观、灵活的界面。下面给你写一…...

TDD-LTE 寻呼流程

目录 1. 寻呼成功流程 1.1 空闲态寻呼 1.2 连接态寻呼 2. 寻呼失败流程 2.1 Paging消息不可达 2.2 RRC建立失败 2.3 eNodeB未上发Initial UE message或达到超时 1. 寻呼成功流程 1.1 空闲态寻呼 寻呼成功&#xff1a;MME发起寻呼&#xff08;S1 接口发送Paing 消息&…...

TCP中的三次握手和四次挥手

TCP中的连接和断开可以说是在面试中经常被问到的问题之一&#xff0c;正好有空就总结一下&#xff0c;首先回顾一下TCP的相关知识点 1. TCP的基础知识 1.1 TCP的基本概念 我们知道TCP是运输层的面向连接的可靠的传输协议。面向连接的&#xff0c;指的就是在两个进程发送数据…...

NAO.99b海潮模型的详解教程

NAO.99b模型是由日本国家天文台开发的全球潮汐模式&#xff0c;基于二维非线性浅水方程。该模型具有较高的分辨率&#xff0c;网格间距为0.50.5&#xff0c;网格数为720360&#xff0c;覆盖的经度范围为0.25&#xff5e;359.75E&#xff0c;纬度范围为89.75S&#xff5e;89.75N…...

Plantuml之JSON数据语法介绍(二十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

迅为龙芯2K1000开发板虚拟机 ubuntu 更换下载源

Ubuntu 系统软件的下载安装我们通常使用命令“apt-get” &#xff0c; 该命令可以实现软件自动下载&#xff0c; 安装&#xff0c; 配置。 该命令采用客户端/服务器的模式&#xff0c; 我们的 Ubuntu 系统作为客户端&#xff0c; 当需要下载软件的时候就向服务器发起请求&#…...

你好!Apache Seata

北京时间 2023 年 10 月 29 日&#xff0c;分布式事务开源项目 Seata 正式通过 Apache 基金会的投票决议&#xff0c;以全票通过的优秀表现正式成为 Apache 孵化器项目&#xff01; 根据 Apache 基金会邮件列表显示&#xff0c;在包含 13 个约束性投票 (binding votes) 和 6 个…...

RFC6749-OAuth2.0

前言 最近在项目中需要实现SSO(单点登录)功能,以实现一处注册,即可在任何平台之间登录的功能。我们项目中并没有直接对接第三方认证系统而是通过集成keycloak 完成一系类安全协议的对接工作。如果我们在代码级别自己完成各种安全协议的对接是一项十分大的工程。不仅要走统一的…...

【代码解析】代码解析之生成token(1)

本篇文章主要解析上一篇&#xff1a;代码解析之登录&#xff08;1&#xff09;里的第8行代码调用 TokenUtils 类里的genToken 方法 https://blog.csdn.net/m0_67930426/article/details/135327553?spm1001.2014.3001.5501 genToken方法代码如下&#xff1a; public static S…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...