您的位置：首页 > 其它

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

2015-10-10 20:33 579 查看

效果类似下面这种：

实现代码：

<!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.onkeyup=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航