输入框验证码输入1位后自动跳转到下一个input

最新推荐文章于 2022-09-19 11:35:11 发布
最新推荐文章于 2022-09-19 11:35:11 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： js常见问题 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41970780/article/details/110927252
版权

输入框验证码输入1位后自动跳转到下一个input

在这里插入图片描述

<div class="dl clearfix">
	<div class="aui-font-size-13 aui-text-black">6位验证码</div>

	<div class="inpt aui-col-xs-2">
		<input placeholder="" type="number" name="" id="" value="" />
	</div>
	<div class="inpt aui-col-xs-2">
		<input placeholder="" type="number" name="" id="" value="" />
	</div>
	<div
最低0.47元/天 解锁文章
小怪兽学前端
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
手机验证码自动跳转下一个输入框之功能
MLONGKRT的博客
12-18 577
这样基本就会实现开篇的效果；但是后来又因为用户不完美的体验，新增可以回退删除事件。后来参考支付宝输入密码的删除事件：将只要用户去点击删除事件，就将输入的所有字符清空，然后从第一个重新开始书写。输入第一个验证码后，自动跳转至后面的输入框中，并且在最后一个输入框输完之后，进行数据校验。
一个input框边输入，另外一个input框中边显示的触发事件
weixin_30414245的博客
04-12 749
onkeyup 转载于:https://www.cnblogs.com/zhuyeshen/p/10699028.html
android 验证码输入框自动跳转下一个
suwenlai的博客
09-08 922
盗个别人的效果图 我的这个控件实现了可以动态配置4位 或者6位 多位的验证码 支持在layout里面动态配置 public class Verificationcode extends RelativeLayout { private Context context; private TextView tv_code; private View lineView; private EditText et_code; private L...
自动跳格的验证码输入
Vintage
07-05 1677
wxml <view class="code_area"> <view class="input_area"> <view bindtap="onFocus" id="0" class="{{ idx === 0 ? 'active' : '' }} {{code[0] ? 'hasValue' : ''}}">{{ code[0] }}</view> <view bindtap="onFocus" id="1" c.
vue实现输入框自动跳转功能
10-15
此外，根据输入框的索引更新变量`num1`到`num6`，在所有输入框填满后，组合成一个字符串并调用`setUpSVIP`方法。 4. `setUpSVIP`方法：这个方法可能是一个异步请求，用于将输入的数字串发送到服务器进行处理。成功...
6位验证码输入框.zip
03-31
最后，为了增强用户体验，还可以添加一些交互效果，如输入时自动跳转到下一个输入框，输入完成后自动触发验证等。这些可以通过监听输入框的`bindinput`事件来实现。 总结，微信小程序中的6位验证码输入框实现涉及...
Android仿滴滴出行验证码输入框功能实例代码
08-28
当用户输入时，`afterTextChanged()` 方法会被调用，这里可以更新当前输入的验证码，并处理边界条件，如限制输入长度、自动跳转到下一个输入框等。`OnKeyListener` 的实现则用于处理键盘事件，比如回车键的按下，...
ios-验证码输入框swift.zip
07-11
此外，为了提高用户体验，我们可能需要添加一些额外的功能，比如自动跳转到下一个输入框、清除输入、倒计时刷新验证码等。这些可以通过监听`textFieldDidEndEditing`或添加自定义按钮来实现。 最后，在`...
iOS 输入验证码或密码,自动下一位的实例
08-28
下面小编就为大家分享一篇iOS 输入验证码或密码,自动下一位的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript实现自动跳转文本功能
10-19
在这个例子中，我们看到的是一种简单的文本输入自动跳转机制，它帮助用户在输入特定格式（例如四位数字）时，焦点会自动从一个输入框移动到下一个。这种功能可以提高用户输入的流畅性，减少手动切换输入框的麻烦。 ...
input校验数字且自动跳转下一个input框输入，监听backspace事件
西风XF的博客
07-17 7325
在前一个输入框写值的时候，若是数字，光标自动跳转到下一个输入框。若是非数字，则不输入值。（自动匹配数字，监听文本框的值是否为数字）；在删除后一个输入框的值的时候，光标自动跳转到前一个输入框。
html页面自动输入数字,js input框输入1位数字后自动跳到下一个input框聚焦
weixin_42501298的博客
06-10 1724
// input框输入1位数字后自动跳到下一个input聚焦function goNextInput(el){var txts = document.querySelectorAll(el);for(var i = 0; ivar t = txts[i];t.index = i;t.setAttribute("readonly", true);t.onkeyup=function(){this.v...
移动端 验证码/密码 输入框实现--安卓/ios适用
m0_37097272的博客
07-05 3846
先贴图，需要实现的效果是这样的。 实现思路有两个： 1、用6个input，输入一个数字后将focus给下一个输入框。 2、用一个input和6个span，input隐藏，用span显示。 现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了） 两种方案遇到的坑，以及优缺点，如下： 方案一：6个inp...
当input框输入到限定长度时，自动focus下一个input框
weixin_30781107的博客
12-13 1090
需求背景 需要输入一串15位的数字，但是要分为3个输入框，每个输入框限定长度5位，当删除当前输入框的内容时，focus到上一个输入框： 实现方法 var field = $('.phone-field'); field.on('keyup', 'input.phone-input', function(e) { var key = e.keyCode...
输入框输入IPv4、子网掩码格式(子网掩码输入3个数字自动跳转下一个输入框)
flhhly的博客
07-13 509
效果图 四个input联用 ipv4格式 <div class="input"> <a-row type="flex" justify="start"> <a-space> <a-col :span="2" ><a-space .
多个input标签自动跳转下一个标签
weixin_44538873的博客
05-09 553
开发工具与关键技术：java 作者：陌 撰写时间：2021年 4月28日 下面让我们讲讲在多个input标签里面输入完成自动跳转到下一个标签，而我这是4个标签的每输入完成5个数字就自动跳转到下一个标签，请看如下代码： function bloonLeng() { var iNow = 0; type = !-[1,] ? ‘onpropertychange’ : ‘oninput’, //满足自动切换焦点的字符数 limit = 5; for (var i = 0; i < inputStyle.le
uniapp vue富文本rich-text样式设置不生效解决方案
weixin_41970780的博客
09-19 2601
uniapp vue富文本rich-text样式设置不生效解决方案
帮我写一个html页面： 页面是左右布局，输入框按钮等靠右边； 页面需要自适应，能够适应pc页面手机页面； 标签名称为文件实验室/账号登录； 两个input框，一个显示输入接收验证码的邮箱在他的右边有一个按钮名称为获取验证码， 第二个input输入框显示输入验证码，他的下方是一个登录按钮； 然后使用ajax技术，将获取到的邮箱账号使用post发送到/admin/等待后端发送验证码，获取验证码的按钮点击后显示60秒后再试期间按钮不能触发； 用户填入验证码后使用post发送到/response/等待后端验证，后端验证通过后跳转到https://www.spacexs.cn，失败则要求重新输入； 字体使用楷体，页面语言是简体中文， 要求点击获取验证码后，按钮文本显示为60秒后再试期间禁用按钮 使用ajax发送请求
最新发布
05-24
以下是一个简单的HTML页面，实现了你的要求： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文件实验室/账号登录</title> <style> body { font-family: "楷体", KaiTi, serif; margin: 0; padding: 0; } .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100vh; box-sizing: border-box; padding: 1em; } .form { display: flex; flex-direction: column; align-items: flex-end; width: 40%; max-width: 500px; } label { display: block; margin-bottom: 0.5em; } input { margin-bottom: 1em; padding: 0.5em; font-size: 1em; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; width: 100%; max-width: 300px; } button { padding: 0.5em 1em; font-size: 1em; border: none; border-radius: 5px; background-color: #007bff; color: #fff; cursor: pointer; } button:disabled { background-color: #ccc; cursor: not-allowed; } </style> </head> <body> <div class="container"> <form class="form"> <label for="email">输入接收验证码的邮箱</label> <input type="email" id="email" name="email" required> <button type="button" id="get-code">获取验证码</button> <label for="code">输入验证码</label> <input type="text" id="code" name="code" required> <button type="submit" id="login">登录</button> </form> </div> <script> var getCodeBtn = document.getElementById('get-code'); var countdown = 60; var countdownTimer; getCodeBtn.addEventListener('click', function() { getCodeBtn.disabled = true; countdownTimer = setInterval(function() { countdown--; getCodeBtn.textContent = countdown + '秒后再试'; if (countdown <= 0) { clearInterval(countdownTimer); countdown = 60; getCodeBtn.textContent = '获取验证码'; getCodeBtn.disabled = false; } }, 1000); // 使用ajax发送请求 var xhr = new XMLHttpRequest(); xhr.open('POST', '/admin/'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('email=' + encodeURIComponent(document.getElementById('email').value)); }); document.getElementById('login').addEventListener('click', function(e) { e.preventDefault(); // 使用ajax发送请求 var xhr = new XMLHttpRequest(); xhr.open('POST', '/response/'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { if (xhr.responseText === 'success') { window.location.href = 'https://www.spacexs.cn'; } else { alert('验证码错误，请重新输入！'); } } }; xhr.send('code=' + encodeURIComponent(document.getElementById('code').value)); }); </script> </body> </html> ``` 这个页面使用了Flexbox布局，实现了左右布局，输入框、按钮等靠右边，并且能够自适应PC和手机页面。使用了ajax技术发送请求，实现了获取验证码和登录功能。获取验证码按钮在点击后会进入倒计时状态，60秒后才能再次点击。在登录时，使用ajax发送请求到后端验证验证码，验证通过则跳转到指定页面，验证失败则要求重新输入。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小怪兽学前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值