回车后获得焦点事件，回车后，下一个文本输入框可获得焦点，并选中

本文链接：https://blog.youkuaiyun.com/u012304877/article/details/79732255

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
</head>
<style type="text/css">
label {color:#b5b5b5}
</style>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
//回车后获得焦点事件
enterEvent()
});

//回车后,下一个文本输入框将会获得焦点，并选中
function enterEvent(){
//$(function() {}) 是$(document).ready(function()的简写。DOM加载完毕之后执行
$(function(){
//$inp在inp前面加上$,表示inp是一个jquery对象，
//该对象指的是当前页面上所有的，可见的，非只读的文本输入框
var $inp = $("input:text:visible:not(:[readonly='readonly'])");
//给$inp对象绑定一个keydown事件，这个事件会在鼠标按下去的时候执行
$inp.bind('keydown', function (e) {
//获得键值
var key = e.which;
//键值为13表示这是回车键
if (key == 13) {
$inp = $("input:text:visible:not(:[readonly='readonly'])");
//e.preventDefault() 取消事件的默认动作。
//该方法将通知 Web 浏览器不要执行与事件关联的默认动作.
e.preventDefault();
//得到当前对象对应的下标，并+1
var nxtIdx = $inp.index(this) + 1;
//选中下一个可见的，非只读的文本输入框
$("input:text:visible:not(:[readonly='readonly']):eq(" + nxtIdx + ")").select();
}
});
});
}
</script>
</head>
<body>
<label>测试步骤：</label><br>
<label>按回车键，即可看到效果</label><br/><br/>

<input type="text" ><input type="text" ><br/>
<input type="text" ><input type="text" readonly="readonly" style="background-color:#b5b5b5"><br/>
<input type="text" value="test1"><input type="text" value="test2"><br/>
<input type="text" value="test3" readonly="readonly" style="background-color:#b5b5b5"><input type="text" value="test4"><br/>
</body>