vue3实现输入框短信验证码功能---全网始祖

组件功能分析
1.按键删除,清空当前input,并跳转prevInput & 获取焦点,按键delete,清空当前input,并跳转nextInput & 获取焦点。按键Home/End键,焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击后跳转上一个/下一个输入框获取焦点。
2.判断按键为数字,则取第一个数字,然后跳转下一个input输入框获取焦点,如果为最后一个,则失去焦点,交互结束。
3.粘贴功能。通过el.clipboardData获取粘贴内容,判断是否为4/6位粘贴内容。是则赋值给页面Input,双向绑定一个数组即可。否则置为空。

代码展示

<template><div class="g-remove-check-code"><p class="g-remove-check-code_title">发送验证码</p><div class="g-remove-check-code"><p class="g-remove-check-code_title">请输入短信验证码以验证您的身份</p><divclass="g-remove-check-code_content"@keyup="fnCheckCodeKeyup"@keydown="fnCheckCodeKeydown"@paste="fnCheckCodeKeyPaste"@input="fnCheckCodeInputEvent"><input :class="{'g-code-input_color': aCheckCodeInputComputed[0] !== ''}" max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="aCheckCodeInputComputed[0]" type="text" ref="firstInputRef" /><input :class="{'g-code-input_color': aCheckCodeInputComputed[1] !== ''}" max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="aCheckCodeInputComputed[1]" type="text" /><input :class="{'g-code-input_color': aCheckCodeInputComputed[2] !== ''}" max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="aCheckCodeInputComputed[2]" type="text" /><input :class="{'g-code-input_color': aCheckCodeInputComputed[3] !== ''}" max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="aCheckCodeInputComputed[3]" type="text" /></div></div><div class="btn-box"><button:disabled="!turnOff"content-text="下一步"@clickEvent="enter"/></div></div>
</div>
</template><script lang="ts" setup>
import { defineComponent, ref, onMounted, onUnmounted, reactive, computed, getCurrentInstance, inject  } from "vue";let aCheckCodeInput = ref(["", "", "", ""]) 	// 存储输入验证码内容let aCheckCodePasteResult = ref([]) 	const turnOff = computed(() => {return aCheckCodeInputComputed.value.filter((v) => !!v)?.length >= 4;});onUnmounted(() => {clearInterval(timer.value);})const enter = async () => {console.log("your code",aCheckCodeInputComputed.value.join("").toUpperCase())}const aCheckCodeInputComputed = computed(() => {if(aCheckCodePasteResult.value.length === 4) {return aCheckCodePasteResult.value;} else if (aCheckCodeInput.value && Array.isArray(aCheckCodeInput.value) && aCheckCodeInput.value.length === 4) {return aCheckCodeInput.value;} else if (/^\d{4}$/.test(aCheckCodeInput.value.toString())) {return aCheckCodeInput.value.toString().split("");} else {return new Array(4);}})// 输入验证码,更新验证码数据const fnCheckCodeKeyup = (e: any) => {let index = e?.target?.dataset.index * 1;let el = e.target;// 解决输入e的问题el.value = el.value.replace(/Digit|Numpad/i, "").slice(0, 1);if (/Digit|Numpad/i.test(e.code)) {// 必须在这里赋值,否则输入框会是空值aCheckCodeInput.value.splice(index, 1, e.code.replace(/Digit|Numpad/i, ""));el.nextElementSibling && el.nextElementSibling.focus();if (index === 3) {if (aCheckCodeInput.value.join("").length === 4)  (document.activeElement as any).blur();}}}// 输入验证码,检测位置变化const fnCheckCodeKeydown = (e: any) =>{let index = e?.target?.dataset?.index * 1;let el = e.target;if (e?.key === "Backspace") {if (aCheckCodeInput.value[index].length > 0) {aCheckCodeInput.value.splice(index, 1, "");} else {if (el.previousElementSibling) {el.previousElementSibling.focus();aCheckCodeInput.value[index - 1] = "";}}} else if(e?.key === "Delete") {if (aCheckCodeInput.value[index].length > 0) {aCheckCodeInput.value.splice(index, 1, "");} else {if(el.nextElementSibling) {el.nextElementSibling.focus();aCheckCodeInput.value[++index] = "";}}} else if (e?.key === "Home") {el?.parentElement?.children[0] && el.parentElement.children[0].focus();} else if (e?.key === "End") {el?.parentElement?.children[aCheckCodeInput.value.length - 1] &&el?.parentElement?.children[aCheckCodeInput.value.length - 1].focus();} else if (e?.key === "ArrowLeft") {if (el?.previousElementSibling) el?.previousElementSibling.focus();} else if (e?.key === "ArrowRight") {if (el?.nextElementSibling) el?.nextElementSibling.focus();} else if(e.key === 'Enter') {this.doActive()}}// 输入验证码,解决一个输入框输入多个字符的问题const fnCheckCodeInputEvent = (e: any) => {let index = e?.target?.dataset?.index * 1;let el = e?.target;el.value = el?.value.replace(/Digit|Numpad/i, "").slice(0, 1);aCheckCodeInput.value[index] = el.value;}// 验证码粘贴const fnCheckCodeKeyPaste = (e: any) =>{e?.clipboardData?.items[0].getAsString((str: string) => {if (str.toString().length === 4) {aCheckCodePasteResult.value = str.split("") as any;(document.activeElement as any).blur();aCheckCodeInput.value = aCheckCodeInputComputed.value;aCheckCodePasteResult.value = [];} else {// 如果粘贴内容不合规,清除所有内容aCheckCodeInput.value = ["", "", "", ""];}});}
</script>
<style scoped lang="scss">
.g-remove-check-code {width: 100%;padding: 4px 0 8px 0;
}.g-remove-check-code .g-remove-check-code_title {font-size: 14px;color: #666;
}.g-remove-check-code .g-remove-check-code_content {display: flex;justify-content: space-between;align-items: center;width: 400px;padding: 28px 0 28px 0;margin: 0 auto;
}.g-remove-check-code .g-remove-check-code_content input {width: 50px;height: 50px;font-size: 36px;text-align: center;border: none;outline: none;border: solid 1px rgba(187, 187, 187, 100);border-radius: 4px;-moz-appearance: textfield;
}.g-remove-check-code .g-remove-check-code_content input.g-code-input_color {border-color: #5290FF;
}.g-remove-check-code .g-remove-check-code_content input::-webkit-outer-spin-button,
.g-remove-check-code .g-remove-check-code_content input::-webkit-inner-spin-button {appearance: none;margin: 0;
}.g-remove-check-code .g-remove-check-code_tip {font-size: 14px;color: #999;text-align: center;
}
</style>

效果展示
在这里插入图片描述

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

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

相关文章

SQL语句之VIEW视图和空值

文章目录 一、VIEW视图 1、定义视图 CREATE VIEW 2、删除视图 3、查询视图和更新视图 二、空值 1、判断一个属性是否为空值 2、空值的运算 一、VIEW视图 1、定义视图 CREATE VIEW CREATE VIEW 视图名(列名 1,列名 n) //若省略列名&#xff0c;则该视图由子査询中 SELE…

快速备份softaculous一键安装的网站程序

近日有客户是通过softaculous一键安装的网站程序&#xff0c;只是想要备份其中的某个网站程序&#xff0c;但是由于他使用的Hostease Linux虚拟主机&#xff0c;也了解到cPanel面板上带备份功能&#xff0c;但是该备份功能会将当前主机上的所有网站的文件进行备份&#xff0c;而…

C++中的虚函数和多态

C中的虚函数和多态 虚函数 C中的虚函数是面向对象编程中的一个核心概念&#xff0c;它允许你在派生类中重写基类中的成员函数。虚函数为多态性提供了机制&#xff0c;使得可以通过基类指针或引用调用派生类中重写的函数。这里是关于虚函数的详细解释&#xff1a; 定义虚函数…

图像分类从零开始(1)

尽我所能&#xff0c;总结留给后面的师弟们&#xff01; 1.目标 搭建一个完整的系统&#xff0c;包括图像数据集预处理&#xff0c;训练模型&#xff0c;分类器&#xff0c;优化器&#xff0c;以及结果数据处理。 2.理论 3.实例&#xff08;猫狗分类&#xff09; Gitee代码…

GEE数据集——2020年江苏省30米分辨率的地表水数据集

简介 要确保水资源安全并提高应对极端水文事件的能力&#xff0c;就必须全面了解各种尺度的水动态。然而&#xff0c;对季节性水文变化较大的水体进行监测&#xff0c;尤其是使用 Landsat 4-9 等中等分辨率卫星图像&#xff0c;面临着巨大的挑战。本研究引入了基于光谱混合物分…

CentOS7 防火墙(firewalld)常规操作

1.查看、打开、关闭防火墙 1.1.查看防火墙是否运行 systemctl status firewalld [rootlocalhost /]# systemctl status firewalld ● firewalld.service - firewalld - dynamic firewall daemonLoaded: loaded (/usr/lib/systemd/system/firewalld.service; disabled; vendor …

3月22日,每日信息差

&#x1f396; 素材来源官方媒体/网络新闻 &#x1f384; 华为云与乐聚签署战略合作协议 &#x1f30d; 我国超重元素研究加速器装置刷新纪录 &#x1f30b; 我国网民规模达10.92亿人&#xff0c;互联网普及率达77.5% &#x1f381; 微软推首批Surface系列AI PC&#xff0c;首度…

C++迈向精通,学习笔记:类与对象

C&#xff1a;类与对象 注意&#xff0c;这是笔记&#xff0c;不是学习手册&#xff01;&#xff01;&#xff01;有可能不适合别人阅读&#xff0c;如果读者有什么问题欢迎在评论区提问&#xff01;&#xff01; 类与对象 不要把类看的多么高深莫测&#xff0c;通过C语言中…

GB/T 35513.2-2017 聚碳酸酯PC模塑和挤出材料检测

聚碳酸酯塑料是一种无味、无臭、无毒、透明的无定形热塑型材料&#xff0c;是分子链中含有碳酸酯的一类高分子化合物的总称。 GB/T 35513.2-2017聚碳酸酯PC模塑和挤出材料测试项目 测试项目 测试标准 熔体体积流动速率 GB/T 3682 拉伸弹性模量 GB/T 1040.2 屈服应力 GB…

基于SSM的土家风景文化管理平台(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的土家风景文化管理平台&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spri…

使用Barrier对齐ConstraintLayout几个控件的最高的一个

前提就是想让一个控件X&#xff0c;对齐A&#xff0c;B&#xff0c;C等控件最高的位置&#xff0c;直接看图。 看&#xff0c;由于name的一行&#xff0c;或者2行&#xff0c;会导致email行的高度&#xff0c;可能比image块高&#xff0c;也可能比image快矮。 那么&#xff…

如何与施耐德Schneider建立EDI连接?

EDI基础知识 何为EDI&#xff1f;是一个软件、系统还是一种流程呢&#xff1f;准确来说&#xff0c;EDI全称Electronic Data Interchange&#xff0c;中文名称是电子数据交换&#xff0c;也被称为“无纸化贸易”。EDI是&#xff1a; 标准化的数据格式连接业务系统间的数据桥梁…

支持开源欧拉openEuler!米尔基于海思Hi3093核心板上市!

新品播报&#xff01;米尔电子发布了基于海思Hi3093高性能MPU的MYC-LHi3093核心板及开发板, 此款核心板支持openEuler embedded OS欧拉系统&#xff0c;丰富生态&#xff0c;可实现100%全国产自主可控。不仅如此&#xff0c;米尔基于Hi3093的核心板及开发板&#xff0c;配套提供…

谷歌浏览器调用相同url数据不刷新

原代码 原因 谷歌浏览访问相同接口默认调用缓存数据 解决方案 添加时间戳

算法打卡day25|回溯法篇05|Leetcode 491.递增子序列、46.全排列、47.全排列 II

算法题 Leetcode 491.递增子序列 题目链接:491.递增子序列 大佬视频讲解&#xff1a;递增子序列视频讲解 个人思路 和昨天的子集2有点像&#xff0c;但昨天的题是通过排序&#xff0c;再加一个标记数组来达到去重的目的。 而本题求自增子序列&#xff0c;是不能对原数组进行…

面试算法-69-三角形最小路径和

题目 给定一个三角形 triangle &#xff0c;找出自顶向下的最小路径和。 每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标 1 的两个结点。也就是说&#xff0c;如果正位于当前行的下标 i &#xff0c;那…

NSSCTF Round#11 Basic ez_signin

题目&#xff1a; from Crypto.Util.number import * from secret import flagp getPrime(512) q getPrime(512) assert p > q n p*q e 65536 m bytes_to_long(flag) num1 (pow(p,e,n)-pow(q,e,n)) % n num2 pow(p-q,e,n) c pow(m,e,n)print("num1",num1…

智慧城市的发展趋势与挑战:未来展望

随着信息技术的飞速发展&#xff0c;智慧城市已成为现代城市发展的重要方向。智慧城市通过集成应用先进的信息通信技术&#xff0c;实现城市管理、服务、运行的智能化&#xff0c;为城市的可持续发展注入了新的活力。然而&#xff0c;在智慧城市的发展过程中&#xff0c;也面临…

hadoop namenode 查看日志里面报错8485无法连接

一、通过日志排查问题&#xff1a; 1、首先我通过jpsall命令查看我的进程&#xff0c;发现namenode都没有开启 2、找到问题后首先进入我的日志目录里查看namenode.log [rootnode01 ~]# /opt/yjx/hadoop-3.3.4/logs/ [rootnode01 ~]# ll [rootnode01 ~]# cat hadoop-root-nam…