Vue Steam同款登录验证数字输入框功能
作者:一天只码五十行
这篇文章主要介绍了Vue Steam同款登录验证数字输入框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
一、效果展示
二、思路
使用多个Input,在输入和回撤时改变焦点
三、代码
<template> <div class="page"> <div class="mainBox"> <div class="numberBox"> <div class="inputBox" v-for="(item, index) in 5" :key="index"> <input :ref="(el) => { if (el) setupRefs[index] = el as HTMLInputElement; }" type="text" maxlength="1" v-model.number="counts[index - 1]" @input="onInputChange(index, $event as InputEvent)" @keydown="handleKeyDown(index, $event)" /> </div> </div> <div class="bottomBox"> <div class="textBox"> 输入您电子邮件地址<span style="color: #2386f5">qq.com</span >中获得的代码 </div> <div class="image"></div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from "vue"; // 用于存储输入框的值 const counts = ref(Array(5).fill(undefined)); // 获取输入框dom const setupRefs = ref<Array<HTMLInputElement | null>>(new Array(5).fill(null)); // 输入框的值发生变化时 const onInputChange = (currentIndex: number, event: InputEvent) => { const value = (event.target as HTMLInputElement).value; if (value && isNaN(Number(value))) { // 如果输入的不是数字,则清空输入框 (event.target as HTMLInputElement).value = ""; } else if (value && value !== "") { setTimeout(() => { setupRefs.value[currentIndex + 1]?.focus(); }, 0); } }; // 输入框按下键盘时 const handleKeyDown = (currentIndex: number, event: KeyboardEvent) => { if (event.key === "Backspace" && !counts.value[currentIndex - 1]) { event.preventDefault(); // 阻止默认行为(删除字符) setupRefs.value[currentIndex - 1]?.focus(); } }; </script> <style lang="scss"> .page { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #191a1e; .mainBox { width: 700px; height: 300px; display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: #32353c; flex-direction: column; .numberBox { width: auto; height: 100px; padding: 0 40px; display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: #2b2e33; padding-bottom: 15px; input { margin-left: 35px; width: 60px; height: 60px; text-align: center; font-size: 25px; background-color: #32353c; color: #fff; border: none; /* 设置所有边框的样式为none */ border-bottom: 3px solid #4c4e52; /* 单独设置底部边框 */ background-color: #2b2e33; outline: none; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } } .bottomBox { display: flex; margin-top: 15px; .textBox { width: auto; height: 100px; font-size: 24px; background-color: #32353c; color: #fff; display: flex; justify-content: center; align-items: center; } .image { width: 100px; height: 100px; margin-left: 40px; background: url("data:image/png;base64,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"); background-size: 100% 100%; } } } } </style> ```
到此这篇关于Vue Steam同款登录验证数字输入框的文章就介绍到这了,更多相关vue验证数字输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!