实现手机6位验证码

最新推荐文章于 2024-01-16 12:16:39 发布

原创

最新推荐文章于 2024-01-16 12:16:39 发布 · 7.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了在Vue项目中实现手机6位验证码的详细步骤。通过使用input标签结合v-model双向绑定，以及CSS和JavaScript，实现了在输入框内输入6位数字时，同时在6个小方框中动态显示的效果。在鼠标按下时，将输入的值循环显示到li元素中，以创建验证码的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目背景：vue
实现效果：这里写图片描述

问题：因为要获取到验证码内容，所以肯定是要用input，那问题就是如何将数字输入到input框里但是还要显示出输入到了六个小框框里
思路：input标签用v-model双向绑定来获取input的value值，input框要在6个框的上面才能输入内容，但是还不能显示出牛投框，然后在鼠标按下的时候循环输入的内容，使用6个 li 设计出样式，然后将input框中的value循环到 li 中显示

上代码：
结构

<input type="number" id="smsCode" v-model="loginInfo.sms" maxlength="6" @keyUp="handleGetSms">
<ul class="dvCode">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
 </ul>

css

input {
    border: none;
    width: 6.4rem;
    display: block;
    margin: 0 auto;
    z-index: 100;     // 为了可以在li的上面显示，可以输入内容
    position: relative;
    opacity: 0;     // 在上面显示但是又要隐藏
    color: t