目录前言思路遇到的问题htmlCSSjs前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验
验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家。
我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法。使用了6个div标签和一个input标签。验证码长度一般是4位或6位,我这里用6位做演示。
上述布局在pc端是ok的,但是在移动端会有问题,移动端的光标底部会有个控件,你能够拖动调整光标位置。大概长这个样子,如下图:
不过解决方法也很简单,红色背景是box,蓝色背景是input
为了方便理解,我将top设置为48px,如下图
实际应该是top: 0,如下图
下面是代码,聪明的你一看就明白。
<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>
.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;
}
// 获取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 验证码输入框的资料请关注编程网其它相关文章!
--结束END--
本文标题: js实现验证码输入框示例详解
本文链接: https://www.lsjlt.com/news/168075.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0