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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
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
php中Socket创建与监听实现方法
2015/01/05 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
用Python创建声明性迷你语言的教程
2015/04/13 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python保留小数位的三种实现方法
2020/01/07 Python
python高级特性简介
2020/08/13 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
深圳茁壮笔试题
2015/05/28 面试题
财务出纳岗位职责
2014/02/03 职场文书
施工安全责任书范本
2014/07/24 职场文书
迎七一演讲稿
2014/09/12 职场文书
休假证明书
2015/06/24 职场文书
高中团支书竞选稿
2015/11/21 职场文书
话题作文之自信作文
2019/11/15 职场文书