我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
实现思路
-
基础样式不用多说
-
主要看下中间六个input框
-
每输入一个input框自动聚焦到下一个
-
这个过程可以通过js来控制
-
每次聚焦到一个input框之后有个聚焦的样式
-
这个可以通过类选择器
:focus来实现 -
当然也可以通过类选择器
:valid来实现- 说下
:valid类选择器，其实就是类似input、select类似的原生form表单组件自带有校验属性时触发的类选择器 - 比如
input的min、max,type为email等
- 说下
-
到了这里，其实就已经没有什么关键点了
具体实现
基础html
<body>
<div class="container">
<h2>Verify Your Account</h2>
<p>We emailed you the six digit code to cool_guy@email.com <br/> Enter the code below to confirm your email address.</p>
<div class="code-container">
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
</div>
<small class="info">
This is design only. We didn't actually send you an email as we don't have your email, right?
</small>
</div>
<script src="script.js"></script>
</body>
关键css
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.code:valid {
border-color: #3498db;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}
关键js
const codes = document.querySelectorAll('.code')
codes[0].focus()
codes.forEach((code, idx) => {
code.addEventListener('keydown', (e) => {
if(e.key >= 0 && e.key <=9) {
codes[idx].value = ''
setTimeout(() => codes[idx + 1].focus(), 10)
} else if(e.key === 'Backspace') {
setTimeout(() => codes[idx - 1].focus(), 10)
}
})
})
完整代码
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐
