JQuery 文本框回车跳到下一个文本框实例

 

 效果体验:http://hovertree.com/texiao/jquery/19/


代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery实现按回车键跳转到下个文本框 - 何问起</title><base target="_blank" />
<meta charset="utf-8" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<h2>jQuery实现文本框按回车键跳转到下个文本框 何问起</h2>
效果如下,请按回车键,效果与Tab键相同:<br />
<input type="text" id="tabhovertree0" value="请按回车键,myslider" /><br />
<input type="text" id="tabhovertree1" onkeydown="javascript:enterHovertree();" value="请按回车键,何问起" /><br />
<input type="text" id="tabhovertree2" onkeydown="javascript:enterHovertree();" value="请按回车键,hovertree" /><br />
<input type="text" id="tabhovertree3" onkeydown="javascript:enterHovertree();" value="请按回车键,柯乐义" /><br />
<a href="http://hovertree.com/menu/javascript/">JavaScript</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao">特效</a> <a href="http://hovertree.com/h/bjae/oyccxom3.htm">原文</a>
<br />本效果兼容IE,火狐,Chrome(酷睿)等多种浏览器
</div>
<script>
$(function () {
$("#tabhover"+"tree0").focus();
$("input[type='text']").on("keypress", function (event) {
var keycode = event.keyCode;
//var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {//按下的是回车键
$(this).nextAll("input[type='text']").eq(0).focus();
// $(this).next().next().focus()//第一个next()为<br />,第二个才是下一个文本框
} 
})
})
</script>
</body>
</html>

 转载自:http://hovertree.com/h/bjae/oyccxom3.htm

相关资料: http://ini.iteye.com/blog/2165698 

你可能感兴趣的:(JavaScript,html,jquery,Web,css)