Js实现监听input输入
实现原理:
默认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输入的更多相关文章
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- 微信小程序监听input输入并取值
小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- [转] 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- js监听input输入字符变化
<p class="text-input"> <input type="text" id="username" autoC ...
- js实时监听input中值得变化
<!DOCTYPE html> <html> <head> <title>zepto</title> <meta name=" ...
- js实时监听input中值的变化
$(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...
- 实时监听input输入情况
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- phpstorm 本地代码更新与服务器同步
第一步: 第二步: 在第二步的时候在 ip之后的 testsftp 测试一下 看是否能连接到服务器 第三步: 第四步:
- Mac OS X 下安装Tableau Desktop Pro for Mac 10.2.0
安装步骤 1.断网安装tableau 2.双击Tableau Desktop.pkg 编辑 3.安装后到应用程序里把tableau这个单独文件从tableau文件夹里直接放到应用程序根目录 4. ...
- Mac系统中安装Nginx
一.前言 本文介绍一下,如何在Mac系统中安装Nginx,把详细过程记录下来,方便以后查看,也方便大家学习. 二.正文 1.安装 Homebrew homebrew是什么?它是Mac中的一款软件包 ...
- react -hook 项目搭建
1.脚手架搭建 2.清除多余文件 3.搭建项目文件列表 4.引入公共样式 5.页面构建LOGIN 6.安装路由 v5 v6有区别 7.搭建路由文件router.js 懒加载配合supence使用 8. ...
- 数据库链接失败错误ERROR com.alibaba.druid.pool.DruidDataSource - {dataSource-1} init error解决
用java -jar启动之后,只要一访问数据库就报错,错误信息如下: 文字如下: 2019-07-02 10:25:12.220 ---> [http-nio-8080-exec-1] ---& ...
- Kubernetes--Pod对象的生命周期
Pod对象自从其创建开始至其终止退出的时间范围称为其生命周期.在这段时间中,Pod会处于多种不同的状态,并执行一些操作:其中,创建主容器(main container)为必需的操作,其他可选的操作还包 ...
- NSFW.js 前端使用教程
引用js + 下载模型 先看文档 https://github.com/infinitered/nsfwjs 非常好,一点也看不懂.总之,先引js,不知道去哪里下载js就上jsdelivr搜一搜 按顺 ...
- Python 切片/列表/字符串之间装换
1. 怎么实现字符串变为list 使用split(),把字符串拆分再存入数组: 例子 input="ni si shi" output=input.split(" &qu ...
- jwt二次加密失败原因(Bad “options.expiresIn“ option the payload already has an “exp“ property.)
在写vue+nodejs项目的校验token时,出现了次错误 然后想了想问题所在: 第一次加密的时候使用jwt.sign(value,秘钥,{}),会返回一个字符串,然后当前端跳转别的发送请求时,会将 ...
- linux 软链接 硬链接 区别
来源 https://www.cnblogs.com/oceanftd/p/13475643.html 相关概念: 链接:简单说,链接就是一种文件共享的方式,是POSIX中的概念,主流文件系统都支持 ...