在html页面中有多个input 输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。
1.原生Js实现：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript">
function focusNextInput(thisInput){
var inputs = document.getElementsByTagName("input");
for(var i = 0;i<inputs.length;i++){
// 如果是最后一个，则焦点回到第一个
if(i==(inputs.length-1)){
inputs[0].focus();
break;
}else if(thisInput == inputs){
inputs[i+1].focus();
break;
}
}
}
</script>
</head>
<body>
<table>
姓名：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
年龄：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
工号：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
</table>
</body>
</html>
2.Jquery实现：
/**
* 回车时跳转到下一个元素
* @Author HTL
* @DateTime 2016-12-30T11:33:25+0800
* @param {[type]} $input [INPUT 元素列表]
* @return {[type]} [description]
*/
function keydown_to_tab($input){
if(!$input) $input = $('input:text:not(:disabled)');
$input.bind("keydown", function(e) {
var n = $input.length;
if (e.which == 13){
e.preventDefault(); //Skip default behavior of the enter key
var nextIndex = $input.index(this) + 1;
if(nextIndex < n)
$input[nextIndex].focus();
else
$input[nextIndex-1].blur();
}
});
} |
鲁公网安备 37120302000001号
