DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現按回車鍵跳轉到下個文本框
jQuery實現按回車鍵跳轉到下個文本框
編輯: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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved