js 实现验证码输入框示例详解

 更新时间:2022年09月21日 11:09:24   作者:名字起太长会有傻子跟着念  
这篇文章主要为大家介绍了js 实现验证码输入框示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家。

思路

我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法。使用了6个div标签和一个input标签。验证码长度一般是4位或6位,我这里用6位做演示。

  • 先将6个div使用flex布局平铺。
  • 再将input使用绝对定位覆盖在6个div上面。
  • 监听input元素的input、focus、blur事件,对用户的输入进行处理。

遇到的问题

上述布局在pc端是ok的,但是在移动端会有问题,移动端的光标底部会有个控件,你能够拖动调整光标位置。大概长这个样子,如下图:

不过解决方法也很简单,红色背景是box,蓝色背景是input

  • input宽度设置大一点,同时使用position: absolute; right: 0; top: 0;右对齐
  • box设置overflow: hidden;将左侧多余部分隐藏,这样就看不到光标啦。

为了方便理解,我将top设置为48px,如下图

实际应该是top: 0,如下图

下面是代码,聪明的你一看就明白。

HTML

<div class="box">
    <div class="field-list">
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
    </div>
    <input class="field-input" type="text" maxlength="6">
</div>

CSS

.box {
    position: relative;
    width: 338px;
    overflow: hidden;
}
.field-list {
    display: flex;
    justify-content: space-between;
}
.field-item {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    line-height: 46px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.field-item-focus {
    border-color: #409EFF;
}
.field-item-focus::before {
    content: '';
    display: block;
    width: 2px;
    height: 30px;
    margin: 8px auto;
    background: skyblue;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}
.field-input {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% + 60px);
    height: 48px;
    padding: 0;
    border: none;
    outline: none;
    opacity: 0;
    background: transparent;
}

JS

// 获取dom
const fieldList = document.querySelectorAll('.field-item');
const fieldInput = document.querySelector('.field-input');
// 监听input输入事件,只支持输入数字,过滤非数字字符
fieldInput.addEventListener('input', function (e) {
    const v = e.target.value.replace(/[^\d]/g, '');
    e.target.value = v;
    // 考虑粘贴情况,循环赋值
    for (let i = 0; i < 6; i++) {
        fieldList[i].innerHTML = v[i] || '';
    }
    // 移除旧光标
    removeCursor();
    // 计算新光标出现位置
    calcCursorPosition();
});
// focus
fieldInput.addEventListener('focus', function (e) {
    calcCursorPosition();
});
// blur
fieldInput.addEventListener('blur', function (e) {
    removeCursor();
});
// 计算光标出现位置
function calcCursorPosition() {
    const length = fieldInput.value.length;
    if (length < 6) {
        fieldList[length].classList.add('field-item-focus');
    }
}
// 移除光标
function removeCursor() {
    // 最后一位没有光标,?.操作符避免报错
    document.querySelector('.field-item-focus')?.classList.remove('field-item-focus');
}

实现效果

以上就是js 实现验证码输入框示例详解的详细内容,更多关于js 验证码输入框的资料请关注脚本之家其它相关文章!

相关文章

  • 详解微信小程序入门五: wxml文件引用、模版、生命周期

    详解微信小程序入门五: wxml文件引用、模版、生命周期

    本篇文章主要介绍了详解微信小程序入门五: wxml文件引用、模版、生命周期,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • 浅谈TypeScript 索引签名的理解

    浅谈TypeScript 索引签名的理解

    这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧
    2021-10-10
  • 8个JS的reduce使用实例和reduce操作方式

    8个JS的reduce使用实例和reduce操作方式

    reduce方法是JavaScript中一个比较强大的方法,可能在平时开发中,有人根本没用过,通过下面的8个例子,学会reduce的用法以及它的常用场景,需要的朋友可以参考一下
    2021-09-09
  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递实例详解

    这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解,需要的朋友可以参考下
    2017-01-01
  • pnpm对npm及yarn降维打击详解

    pnpm对npm及yarn降维打击详解

    这篇文章主要为大家介绍了pnpm对npm及yarn降维打击原因详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序微信支付接入开发实例详解

    微信小程序微信支付接入开发实例详解

    这篇文章主要介绍了微信小程序微信支付接入开发实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • CheckBox 如何实现全选?

    CheckBox 如何实现全选?

    CheckBox 如何实现全选?...
    2006-06-06
  • JavaScript的单线程和异步详细

    JavaScript的单线程和异步详细

    这篇文章要给大家分享的是JavaScript的单线程和异步,其实单线程和异步确实不能同时成为一个语言的特性,js选择了成为单线程的语言,所以它本身不可能是异步的,但js宿主环境是多线程,宿主环境通过某种方式使js具备了异步属性,下面就来具体介绍,需要的朋友可以参考一下
    2021-10-10
  • 本地搭建微信小程序服务器的实现方法

    本地搭建微信小程序服务器的实现方法

    这篇文章主要介绍了本地搭建微信小程序服务器的实现方法的相关资料,希望通过本文能帮助到大家,让大家轻松的搭建自己的微信小程序的服务器,需要的朋友可以参考下
    2017-10-10
  • 使用PreloadJS加载图片资源的基础方法详解

    使用PreloadJS加载图片资源的基础方法详解

    PreloadJS是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源简单点儿说就是一个加载插件,它可以做成页面异步加载且顶部会有进度条动画
    2020-02-02

最新评论