input text输完自动跳到下一个
应用场景:
短信验证码输入
效果:
input输入框,输入完以后自动跳转到下一个
思路:
- 四个输入框
- 进入聚焦到第一个输入框
- 第一个输入框输完一个字符后自动聚焦到下一个输入框
1.四个输入框
<input type="text" name="sn1" id="sn1"/>
<input type="text" name="sn2" id="sn2"/>
<input type="text" name="sn3" id="sn3"/>
<input type="text" name="sn4" id="sn4"/>
2. 文档加载完成后聚焦到第一个输入框
$(function(){
$("#sn1").focus();
})
3.用jquery获取到这四个输入框,遍历四个输入框,如果发生输
入事件,判断输入框内的值。如果小于1个字符,那么前一个输入
框获取到焦点;如果大于或者等于一个字符,那么后一个输入框
获取到焦点。这样就完成了input自动跳到下一个输入框。
$("input[name^='sn']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
});
});
修复
如果不限定input输入框的长度,或出现输入完后可再输入的情况。
<input type="text" name="sn1" maxlength="1" id="sn1"/>
<input type="text" name="sn2" maxlength="1" id="sn2"/>
<input type="text" name="sn3" maxlength="1" id="sn3"/>
<input type="text" name="sn4" maxlength="1" id="sn4"/>
<script type="text/javascript">
$(function(){
$("#sn1").focus();
//自动跳到下一个输入框
$("input[name^='sn']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
});
});
});
</script>
完善
<input type="text" name="sn1" maxlength="1" id="sn1"/>
<input type="text" name="sn2" maxlength="1" id="sn2"/>
<input type="text" name="sn3" maxlength="1" id="sn3"/>
<input type="text" name="sn4" maxlength="1" id="sn4"/>
<script type="text/javascript">
$(function(){
$("#sn1").focus();
function device_verify(){
console.log($("#sn1").val()+$("#sn2").val()+$("#sn3").val()+$("#sn4").val());
}
//自动跳到下一个输入框
$("input[name^='sn']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
});
});
$("input[type='text'][id^='sn']").bind('keyup',
function() {
var len = $("#sn1").val().length + $("#sn2").val().length + $("#sn3").val().length + $("#sn4").val().length;
if (len == 4) device_verify();
});
});
</script>
兼容IE的写法
参考 input text框 输完一个自动跳到下一个
input text输完自动跳到下一个的更多相关文章
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集
在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...
- input输入框修改后自动跳到最后一个字符
<input class="m-form-control" onpaste="return false" placeholder="直播间名称& ...
- 回车跳到下一个EDIT
1.按下方法procedure TForm2.Edit1KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);begin if Key ...
- 解决iPhone上select时常失去焦点,随意跳到下一个输入框,影响用户操作
window.addEventListener('load', function() { FastClick.attach(document.body); }, false); //300s延迟,解决 ...
- 010——MATLAB运行错误跳到下一个循环
(一)MATLAB运行错误跳到下一个循环 :%文件的个数 try %运行的程序放到这里 catch continue%假如上面的没法执行则执行continue,到下个循环 end
- 多个input连接在一起的时候如何实现输入一个数字跳入下一个
这个是页面内容 ,我分了12格子,作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面 这样配上背景图,看着是一个大的输入框. <div id="A ...
- eas之怎么设置单据保存或者提交完不跳到下个新增页面
this.chkMenuItemSubmitAndAddNew.setSelected(false);
随机推荐
- centos安装redis-3.2.3
这次介绍的是在虚拟机centos下安装redis-3.2.3 首先进入官网http://redis.io/download
- QT5-控件-QLabel和QLCDNumber-标签显示图片或者视频,LCD用于上位机不错
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QLabel> #incl ...
- ContentProvider URI的组成
ContentProvider URI由哪几部分组成 ContentProvider URI与HTTP URI类似,由以下4部分组成: 1.content:// 相当于HTTP URI中的http ...
- PowerShell: 如何解决File **.ps1 cannot be loaded because the execution of scripts is disabled on this sy
PowerShell 默认不允许执行*.ps1脚本文件.运行ps1文件会得到下面的错误: File C:\Temp\Test.ps1 cannot be loaded because the exec ...
- Web 前端开发者必知CSS 属性
1. 圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现. “border-ra ...
- 【问题】pod setup 问题
安装pod setup 的时候,可能会安装失败,可以多试几次,但是如果一直失败,那就是由问题了. 解决办法: 1. 分别执行下面命令卸载cocoapods和xcodeproj,如果你的机器上面有多个版 ...
- Linux命令记录
端口号 1.查看端口号 使用netstat -anp来查看那些端口被打开.加参数'-n'会将应用程序转为端口显示,即数字格式的地址,如:nfs->2049, ftp->21,因此可以开启两 ...
- TextView属性详解
android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/phone/map/all)android:a ...
- 深入剖析keil c51 --- 从汇编到c51
第一节 main()函数和启动代码 汇编是从org 0000h开始启动,那么keil c51是如何启动main()函数的?keil c51有一个启动程序startup.a51,它总是和c程序一起编译和 ...
- Changing a Service's Configuration
Changing a Service's Configuration A service configuration program uses the ChangeServiceConfig an ...