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

news2025/1/23 10:39:16

先看下效果如下:
在这里插入图片描述
动态图如下
在这里插入图片描述
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 设置为true
          prevel.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";

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1339200.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ClickHouse基础知识(二):ClickHouse 安装教程

1. 准备工作 1.1 确定防火墙处于关闭状态 1.2 CentOS 取消打开文件数限制 &#xff08;1&#xff09;在 hadoop101 的 /etc/security/limits.conf 文件的末尾加入以下内容 sudo vim /etc/security/limits.conf&#xff08;2&#xff09;在 hadoop101 的/etc/security/limits.…

64.乐理基础-打拍子-前八后十六、前十六后八拍子

前置内容&#xff1a;63.乐理基础-打拍子-四十六-CSDN博客 前八后十六指的是前半拍是一个八分音符&#xff0c;后半怕是两个十六分音符的节奏型&#xff0c;如图1。 前十六后八刚好就与前八后十六反着&#xff0c;如图3。 图1&#xff1a;在以四分音符为一拍的时候这三个音符加…

Android下载gradle失败解决方法

1、在gradle-wrapper.properties文件中查看自己需要下载gradle什么版本的包和zip路径&#xff08;wrapper/dists&#xff09;。 2、在setting中查看Gradle的保存路径&#xff0c;如下图&#xff1a;C:/Users/Administrator/.gradle&#xff0c;加上第一步的zip路径得到下载grad…

chcp 65001

chcp 65001 DOS,BAT,CMD乱码 转UTF-8&#xff0c;就不会汉字乱码了 936 GBK 65001 UTF-8

C语言中关于if else的理解

if else我们可以理解为 if(条件1) //如果条件1成立 语句1&#xff1b; //执行语句1 else //如果条件1不成立 语句2; //执行语句2 这是一个经典的if els…

Vue Echarts 多折线图只有一条X轴(合并X轴数据并去重排序) - 附完整示例

echarts&#xff1a;一个基于 JavaScript 的开源可视化图表库。 目录 效果 一、介绍 1、官方文档&#xff1a;Apache ECharts 2、官方示例 二、准备工作 1、安装依赖包 2、示例版本 三、使用步骤 1、在单页面引入 echarts 2、指定容器并设置容器宽高 3、数据处理&am…

Word中插入mathtype的行内公式显示不全,设置行距,最小值

Word中插入mathtype的行内公式显示不全 如下图&#xff1a;公式上下被遮住 解决方式&#xff1a; 设置所在段落的行距&#xff1a;最小值--xx磅。同时取消勾选 “如果定义了文档网格&#xff0c;则对齐到网格” 处理后效果&#xff1a;

电子科大软件架构设计——期末复习题集

文章目录 系统分析与设计概述面向对象建模语言系统规划系统需求分析系统架构设计软件建模详细设计与设计模式用户界面设计 系统分析与设计概述 1&#xff0e;下面哪个不是信息系统利益相关者?&#xff08;D) A&#xff0e;客户B&#xff0e;用户 C.开发人员D&#xff0e;监理…

免费SSL证书申请入口

免费SSL证书的优势 a. 低成本 免费SSL证书相对于其他类型的SSL证书来说&#xff0c;无需支付昂贵的费用。对于个人网站、小型企业或预算有限的组织而言&#xff0c;免费SSL证书是一种经济实惠的选择。 b. 提高搜索引擎排名 搜索引擎算法中&#xff0c;对于使用HTTPS协议的网…

Solana 生态铭文跨链桥 Sobit 是何神圣?其场外白名单已达到1200U

在短暂的沉寂&#xff0c;在与 Solana 手机 Saga 联合生态 Meme 币 Bonk 掀起一波 meme 浪潮&#xff0c;以及GPU 计算网路Render network 宣布将从公链Polygon迁往Solana 后&#xff0c;Solana 生态再次迎来爆发。随着 SOL 代币在 12 月暴涨&#xff0c;SOL 也在市值上超越了 …

性能测试-jemeter:安装 / 基础使用

一、理解jemeter 官网-Apache JMeter-Apache JMeter™ JMeter是一款开源的性能测试工具&#xff0c;主要用于模拟大量用户并发访问目标服务器&#xff0c;以评估服务器的性能和稳定性。 JMeter可以执行以下任务序号用途描述1性能测试通过模拟多个用户在同一时间对服务器进行…

python风格规范之missing whitespace after

python风格规范之missing whitespace after 规范错误/警告描述规范错误描述(示例)规范错误认知正确示例 规范错误/警告描述 PEP 8: E231 missing whitespace after [mark]规范错误描述(示例) 规范错误认知 上述规范错误表示"[mark]"后面没有添加空格 。错误示例如下…

第一届能源电子产业创新大赛太阳能光伏赛道在京顺利完成初赛评审

近日&#xff0c;第一届能源电子产业创新大赛太阳能光伏赛道初赛在北京顺利举行。本次太阳能光伏赛道赛事由工业和信息化部产业发展促进中心、宜宾市人民政府主办&#xff0c;宜宾市经济和信息化局、宜宾高新技术产业园区承办&#xff0c;中国国检测试控股集团股份有限公司协办…

C语言之字符串处理

目录 字符串长度 显示字符串 数字字符的出现次数 大小写字符转换 字符串数组的参数传递 非字符串的字符数组 目前我们所学习到的是围绕字符串的处理&#xff0c;仅仅是生成字符串、读取并显示字符串&#xff0c;下面我学习更加灵活处理字符串的方式。 字符串长度 我们来看…

MR实战:统计总分与平均分

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建成绩映射器类5、创建成绩驱动器类6、启…

单词搜索 II[困难]

一、题目 给定一个m x n二维字符网格board和一个单词&#xff08;字符串&#xff09;列表words&#xff0c; 返回所有二维网格上的单词。单词必须按照字母顺序&#xff0c;通过 相邻的单元格 内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同…

面试官:并发和并行的区别

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…

UDP协议工作原理及实战(二)UDP客户端代码实现

这个是一个测试我们写的函数是否正确。 启动服务&#xff1a;这里边的udpsocket->bind(port)就是对端口号进行连接。

Sectigo和Certum的IP证书区别

IP证书是比较特别的一款数字证书。大多数SSL数字证书都是针对域名站点的数字证书&#xff0c;比如单域名SSL证书、多域名SSL证书和通配符SSL证书&#xff0c;而IP证书针对的是只拥有公网IP地址的站点。签发IP证书的CA认证机构并不多&#xff0c;Sectigo和Certum旗下都有IP证书&…