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 设置为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";

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

volatile关键字的作用是什么?

大家好&#xff0c;我是"java继父"伯约&#xff0c;这篇对大家有帮助的话求一个赞&#xff0c;另外文章末尾放了我从月入7k到现在3W的学习资料&#xff0c;大家可以去领一下&#xff08;无偿&#xff09;。 1.防重排序 我们从一个最经典的例子来分析重排序问题。大家…

[python]python使用M-LSD直线检测算法onnx部署模型实时检测

介绍 github地址&#xff1a;https://github.com/navervision/mlsd LSD (M-LSD)一种用于资源受限环境的实时轻量线段检测器。它利用了极其高效的 LSD 架构和新颖的训练方案&#xff0c;包括 SoL 增强和几何学习方案。模型可以在GPU、CPU甚至移动设备上实时运行。算法已开源&a…

云原生机器学习平台cube-studio开源项目及代码简要介绍

1. cube-studio介绍 云原生机器学习平台cube-studio介绍&#xff1a;https://juejin.cn/column/7084516480871563272 cube-studio是开源的云原生机器学习平台&#xff0c;目前包含特征平台&#xff0c;支持在/离线特征&#xff1b;数据源管理&#xff0c;支持结构数据和媒体标…

maven工具的搭建以及使用

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;首先进行maven工具的搭建&#x1f993;1.[打开下载 maven 服务器官网](http://maven.apache.org)&#x1fa85;2.解压之后&#xff0c;配置环境变量&#x1f3e8;3.打开设…

EasyExcel导出

1.简介 官网&#xff1a;EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 2.案例 2.1 实现的效果 效果图如下&#xff1a; 2.2 实现步骤 三种情景&#xff0c;主要是表头和数据有区别&#xff0c;简列实现步骤如下&#xff1a; 2.3 具体实现 2.3.1 前置-依赖导入…

双向链表基本操作及顺序和链表总结

目录 基本函数实现 链表声明 总的函数实现声明 创建一个节点 初始化链表 打印 尾插 尾删 头插 头删 查找 pos前插入 删除pos位置 销毁链表 顺序表和链表总结 基本函数实现 链表声明 typedef int DLTDataType;typedef struct DListNode {struct DListNode* nex…

小白必学!手把手教你从零打造Facebook脸书商城

Facebook 脸书商城已经逐渐成为了跨境电商开拓市场的选择&#xff0c;这是因为脸书商城背靠 Facebook 巨大的平台流量&#xff0c;可以链接卖家的品牌&#xff0c;增加品牌曝光率&#xff0c;提高流量&#xff0c;是一个非常好的流量洼地。如果你还没有注册脸书商城&#xff0c…

图像处理-周期噪声

周期噪声 对于具有周期性的噪声被称为周期噪声&#xff0c;其中周期噪声在频率域会出现关于中心对称的性质&#xff0c;如下图所示 带阻滤波器 为了消除周期性噪声&#xff0c;由此设计了几种常见的滤波器&#xff0c;其中 W W W表示带阻滤波器的带宽 理想带阻滤波器 H ( u …

【Fastadmin】通用排序weigh不执行model模型的事件

在model模型类支持的before_delete、after_delete、before_write、after_write、before_update、after_update、before_insert、after_insert事件行为中&#xff0c;我们可以快捷的做很多操作&#xff0c;如删除缓存、逻辑判断等 但是在fastadmin的通用排序weigh拖动中无法触发…

Flink项目实战篇 基于Flink的城市交通监控平台(上)

系列文章目录 Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;上&#xff09; Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;下&#xff09; 文章目录 系列文章目录1. 项目整体介绍1.1 项目架构1.2 项目数据流1.3 项目主要模块 2. 项目数据字典2.1 卡口…

Goby 漏洞发布| Apache OFBiz webtools/control/ProgramExport 远程代码执行漏洞(CVE-2023-51467)

漏洞名称&#xff1a;Apusic 应用服务器 createDataSource 远程代码执行漏洞 English Name&#xff1a;Apache OFBiz webtools/control/ProgramExport remote code execution vulnerability (CVE-2023-51467) CVSS core: 9.8 影响资产数&#xff1a; 5912 漏洞描述&#xf…

堡垒机的演变过程

堡垒机的概念源自跳板机&#xff08;前置机&#xff09;。早在20世纪90年代末21世纪初期&#xff0c;部分中大型企业为了能对运维人员的远程登录进行集中管理&#xff0c;会在机房部署一台跳板机。跳板机其实就是一台unix/windows操作系统的服务器。并且所有运维人员都需要先远…

如何使用甘特图进行项目管理?

或许你在工作中或项目启动会议上听说过“甘特图”一词&#xff0c;但对此了解不多。虽然这些图表可能变得相当复杂&#xff0c;但基础知识并不难掌握。通过本文&#xff0c;你将清楚地了解什么是甘特图、何时使用甘特图、创建甘特图的技巧等等。 什么是甘特图&#xff1f; 甘特…

HBase 例行灾备方案:快照备份与还原演练

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

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

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

【OpenAI Q* 超越人类的自主系统】DQN :Q-Learning + 深度神经网络

深度 Q 网络&#xff1a;用深度神经网络&#xff0c;来近似Q函数 强化学习介绍离散场景&#xff0c;使用行为价值方法连续场景&#xff0c;使用概率分布方法实时反馈连续场景&#xff1a;使用概率分布 行为价值方法 DQN&#xff08;深度 Q 网络&#xff09; 深度神经网络 Q-L…

【本地缓存篇】LFU、LRU 等缓存失效算法

LFU、LRU 等缓存失效算法 ✔️ 解析✔️FIFO✔️LRU✔️LFU✔️W-TinyLFU ✔️ 解析 缓存失效算法主要是进行缓存失效的&#xff0c;当缓存中的存储的对象过多时&#xff0c;需要通过一定的算法选择出需要被淘汰的对象&#xff0c;一个好的算法对缓存的命中率影响是巨大的。常见…

排列组合算法(升级版)

前言 在上一期博客中我们分享了一般的排列组合算法&#xff08;没看的话点这里哦~&#xff09;&#xff0c;但是缺点很明显&#xff0c;没法进行取模运算&#xff0c;而且计算的范围十分有限&#xff0c;而今天分享的排列组合升级版算法能够轻松解决这些问题&#xff0c;话不多…

Matlab:非线性规划

1、语法&#xff1a; xfmincon(fun,x0,A,b) xfmincon(fun,x0,A,b,Aeq,beq) xfmincon(fun,x0,A,b,Aeq,beq,lb,ub) xfmincon(fun,x0,A,b,Aeq,beq,lb,ub,nonlcon) xfmincon(fun,x0,A,b,Aeq,beq,lb,ub,nonlcon,options) xfmincon(problem) [x,fval]fmincon(___) [x,fval,exitflag,…

Leetcode—2660.保龄球游戏的获胜者【简单】

2023每日刷题&#xff08;七十二&#xff09; Leetcode—2660.保龄球游戏的获胜者 实现代码 class Solution { public:int isWinner(vector<int>& player1, vector<int>& player2) {long long sum1 0, sum2 0;int n player1.size();for(int i 0; i &…