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


Posted in Javascript onSeptember 23, 2022

前言

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

思路

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

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

遇到的问题

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

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

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

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

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

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

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

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

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

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 实现验证码输入框示例详解的详细内容,更多关于js 验证码输入框的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
小程序实现订单倒计时功能
Apr 23 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
TypeScript 内置高级类型编程示例
Sep 23 #Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 #Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 #Javascript
TS 类型兼容教程示例详解
Sep 23 #Javascript
TS 类型收窄教程示例详解
Sep 23 #Javascript
JavaScript实现简单的音乐播放器
Aug 14 #Javascript
vue实现简易音乐播放器
Aug 14 #Vue.js
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
一个odbc连mssql分页的类
2006/10/09 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
从0开始的Python学习016异常
2019/04/08 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Python实现简单猜数字游戏
2021/02/03 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
类的核心特性有哪些
2014/01/01 面试题
给校长的建议书500字
2014/05/15 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
内勤岗位职责
2015/02/10 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2015中学学校工作总结
2015/07/20 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript