实现原理:

默认input第一个带光标,第一个输完自动跳转到第一个输入框,以此类推,

当删除某一个输入框中的值重新输入,输入完后自动跳转到下一个

代码实现:

<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>
let 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)
}
})
})
@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');
*{
box-sizing: border-box;
}
body{
background: #fbfcfe;
font-family: "Muli", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container{
padding: 30px;
background: #fff;
border: 3px solid #000;
border-radius: 10px;
max-width: 1000px;
text-align: center;
}
.code-container{
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0;
}
.code{
border-radius: 5px;
font-size: 75px;
height: 120px;
width: 100px;
border: 1px solid #eee;
margin: 1%;
text-align: center;
font-weight: 300;
-moz-appearance: textfield;
}
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
.code:valid{
border: #3498bd;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}
.info{
background: #eaeaea;
display: inline-block;
padding: 10px;
line-height: 20px;
max-width: 400px;
color: #777;
border-radius: 5px;
}
@media(max-width:600px){
.code-container{
flex-wrap: wrap;
}
.code{
font-size: 60px;
height: 80px;
max-width: 70px;
}
}

效果实现:

Js实现监听input输入的更多相关文章

  1. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  2. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  3. 微信小程序监听input输入并取值

    小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...

  4. 实时监听input输入的变化(兼容主流浏览器)【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  5. [转] 实时监听input输入的变化(兼容主流浏览器)

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  6. 实时监听input输入的变化(兼容主流浏览器)

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  7. js监听input输入字符变化

    <p class="text-input"> <input type="text" id="username" autoC ...

  8. js实时监听input中值得变化

    <!DOCTYPE html> <html> <head> <title>zepto</title> <meta name=" ...

  9. js实时监听input中值的变化

    $(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...

  10. 实时监听input输入情况

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Windows 设置当前路径 临时环境变量 查看、修改、删除与添加

    需求 有些程序依赖的Python版本不同,安装了Python2.7和Python3.10(3.x没有向下兼容),需要设置当前路径的 python 版本(指定使用2或3). 也不止Python,类似的情 ...

  2. ABAP学习(35):常用Function

    ABAP Function ABAP Coding过程中比较好用的Function整理. 1.获取Domain信息 代码实例: "****************************** ...

  3. Windows10免安装版的Mysql

    文章转载出处https://www.cnblogs.com/winton-nfs/p/11524007.html 免安装版的Mysql MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用 ...

  4. Redis的不同客户端对比

    Redis 官方推荐的 Java 客户端有Jedis.lettuce 和 Redisson 客户端 简介 优点 缺点 Jedis 提供了比较全面的 Redis 操作 Jedis 简单全面, 支持 pi ...

  5. 性能测试-dstat以及sar(网络相关数据查看)

    1.dstat参数说明 # 安装 yum install dstat -y dstat命令不加任何参数时,会收集CPU.磁盘.网络.分页.系统的数据信息,每秒收集一次.缺省参数时相当于dstat -c ...

  6. vm-linux-格式化磁盘以及挂载

    数据盘大小20g 文件系统xfs 分区工具fdisk 1,虚拟机关机状态,打开设置新添加一个20g硬盘 2,重新启动虚拟机,并登陆linux,打开命令窗口 3,对磁盘进行分区 输入 fdisk -l ...

  7. Raid磁盘阵列更换磁盘时另一块盘离线恢复案例(v7000存储数据恢复)

    Raid磁盘阵列更换磁盘时另一块盘离线恢复案例(v7000存储数据恢复) [故障描述]客户设备型号为IBM V7000存储,架构为AIX+oracle+V7000存储阵列柜,需要恢复的数据主要存放在阵 ...

  8. 【Java学习Day06】注释种类、符号及用法

    注释种类 单行注释:只能注释一行文字 多行注释:可以注释一段文字 文档注释:用来生成说明文件 注释符号及用法 单行注释:// //后面写注释 多行注释:/**/ /* 我是注释 我是注释 我是注释 * ...

  9. 解决linux系统中对两个不同的网络连接http访问

    项目5G 问题背景:调用网络端的服务器服务,对本地机器人进行控制,以实现机器人应执行的任务. 需求:主机需要访问外网的API,同时在本地局域网与机器人的API进行通信. 问题:要解决HTTP请求发送到 ...

  10. C# 中 SetTimeout 方案

    近期项目中需在用户点击按钮后,延时执行代码逻辑,避免频繁操作.网上没找到有关 C# SetTimeout 官方API , 于是通过异步线程,动手实现一个.方案如下,如果同一个DelayedProces ...