获取inpu焦点，输入完后自动跳到第二个input

最新推荐文章于 2022-08-17 18:23:26 发布

美特斯鲁元

最新推荐文章于 2022-08-17 18:23:26 发布

阅读量7.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/meitesiluyuan/article/details/49029213

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果类似下面这种：

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
#wrap {
margin:auto;
width: 300px;
}
#wrap input[type=text]{
width:30px;
height:20px;
float:left;
text-align:center;
}
</style>
<script>
onload = function(){
var txts = wrap.getElementsByTagName("input");
for(var i = 0; i<txts.length;i++){
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.οnkeyup=function(){
this.value=this.value.replace(/^(.).*$/,'$1');
var next = this.index + 1;
if(next > txts.length - 1) return;
txts[next].removeAttribute("readonly");
txts[next].focus();
}
}
txts[0].removeAttribute("readonly");
}

$(document).ready(function(){
$("button").on('click',function(){
var v1 = $("input:eq(0)").val();
var v2 = $("input:eq(1)").val();
var v3 = $("input:eq(2)").val();
var v4 = $("input:eq(3)").val();
var v5 = $("input:eq(4)").val();
var v6 = $("input:eq(5)").val();
var str=v1+v2+v3+v4+v5+v6;
alert(str); //得到6个input的值得集合
})
})
</script>
</head>
<body>
<div id="wrap">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<button>点击</button>
</body>
</html>