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

news/2024/7/10 2:06:06 标签: uni-app, vue

先看下效果如下:
在这里插入图片描述
动态图如下
在这里插入图片描述
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.niftyadmin.cn/n/5290171.html

相关文章

53.网游逆向分析与插件开发-游戏反调试功能的实现-通过内核信息检测调试器

码云地址&#xff08;master分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;b44fddef016fc1587eda40ca7f112f02a8289504 代码下载地址&#xff0c;在 SRO_EX 目录下&#xff0c;文件名为&#xff1a;SRO_Ex-通过内核信息…

Kali Linux如何启动SSH并在Windows系统远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …

Flask 日志

flask 日志 代码源码源自编程浪子flask点餐小程序代码 记录用户访问日志 和 错误日志 这段代码是一个基于Flask框架的日志服务类&#xff0c;用于 记录用户访问日志 和 错误日志。代码中定义了一个名为LogService的类&#xff0c;其中包含了两个静态方法&#xff1a;addAcc…

【VUE】Flask+vue-element-admin前后端分离项目发布到linux服务器操作指南

目录 一、Flask后端发布环境搭建1.1 python环境第一步&#xff1a;安装python环境第二步&#xff1a;配置python虚拟环境 1.2 uwsgi环境1.3 nginx配置1.4 测试 二、VUE前端发布环境搭建2.1 配置修改2.2 打包上传服务器2.3 nginx配置2.3 测试 三、联合调试 一、Flask后端发布环境…

Feature Prediction Diffusion Model for Video Anomaly Detection 论文阅读

Feature Prediction Diffusion Model for Video Anomaly Detection论文阅读 Abstract1. Introduction2. Related work3. Method3.1. Problem Formulation3.2. Feature prediction diffusion module 3.3. Feature refinement diffusion module4. Experiments and discussions4.1…

节假日计算器

节假日计算器 代码结果 代码 import cn.hutool.core.text.StrFormatter; import com.google.common.collect.Lists; import lombok.Data;import java.time.LocalDate; import java.time.format.TextStyle; import java.util.ArrayList; import java.util.Collections; import …

c语言用四种方式求解成绩之中最高分和最低分的差值

文章目录 一&#xff0c;题目二&#xff0c;方法1&#xff0c;方法一2&#xff0c;方法二3&#xff0c;方法三4&#xff0c;方法四 三&#xff0c;示例结果 一&#xff0c;题目 最高分最低分之差 输入n个成绩&#xff0c;换行输出n个成绩中最高分数和最低分数的差 输入 : 两行…

Docker 概念介绍

1、Docker 简介 Docker一个快速交付应用、运行应用的技术: 可以将程序及其依赖、运行环境一起打包为一个镜像&#xff0c;可以迁移到任意Linux操作系统运行时利用沙箱机制形成隔离容器&#xff0c;各个应用互不干扰启动、移除都可以通过一行命令完成&#xff0c;方便快捷 Doc…