ASP.NET jQuery 實例2 (表單中使用回車在TextBox之間向下移動)

更新時間：2012年01月13日 22:20:10 作者：

每次當(dāng)用戶在一個文本框輸入完數(shù)據(jù)后，更希望在敲入回車鍵后，焦點會自動移動到下一個文本框

通過下面的代碼可以實現(xiàn)這種切換的效果。

首先我們來看界面：

界面代碼：

復(fù)制代碼代碼如下:

 
<body> 
<form id="form1" runat="server"> 
<div align="center"> 
<fieldset style="width: 400px; height: 200px;"> 
<table cellpadding="3" cellspacing="3" border="0"> 
<tr> 
<td> 
<asp:Label ID="lblName" Text="姓名: " runat="server"></asp:Label> 
</td> 
<td> 
<asp:TextBox ID="txtName" Width="200px" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
<asp:Label ID="lblAddress" Text="地址: " runat="server"></asp:Label> 
</td> 
<td> 
<asp:TextBox ID="txtAddress" Width="200px" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
<asp:Label ID="lblContact" Text="聯(lián)系電話: " runat="server"></asp:Label> 
</td> 
<td> 
<asp:TextBox ID="txtContact" Width="200px" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
<asp:Label ID="lblEmail" Text="電子郵箱: " runat="server"></asp:Label> 
</td> 
<td> 
<asp:TextBox ID="txtEmail" Width="200px" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td> 
</td> 
<td> 
<asp:Button ID="btnSubmit" Text="提交" runat="server" /> 
<asp:Button ID="btnReset" Text="重置" runat="server" /> 
</td> 
</tr> 
</table> 
</fieldset> 
</div> 
</form> 
</body> 

腳本代碼：

復(fù)制代碼代碼如下:

 
<head runat="server"> 
<title>Recipe2</title> 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("input:text:first").focus(); // TextBox轉(zhuǎn)換成html控件為<input type="text"/> 
$("input:text").bind("keydown", function (e) { 
if (e.which == 13) { // 獲取Enter鍵值 
e.preventDefault(); // 阻止表單按Enter鍵默認行為，防止按回車鍵提交表單 
var nextIndex = $("input:text").index(this) + 1; 
$("input:text")[nextIndex].focus(); 
} 
}); 
$("#<%=btnReset.ClientID%>").click(function () { 
$("form")[0].reset(); 
}); 
}); 
</script> 
</head> 

您可能感興趣的文章:

相關(guān)文章

jQuery length 和 size()區(qū)別總結(jié)
這篇文章主要介紹了jQuery length 和 size()區(qū)別總結(jié),在這里length是屬性，size()是方法，需要的朋友可以參考下
2018-04-04
jQuery中:radio選擇器用法實例
這篇文章主要介紹了jQuery中:radio選擇器用法,實例分析了:radio選擇器的功能、定義及匹配單選按鈕的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery EasyUI Accordion可伸縮面板組件使用詳解
這篇文章主要為大家詳細介紹了jQuery EasyUI Accordion可伸縮面板組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
加載jQuery后$沖突的解決辦法
因為jquery中也有$調(diào)用，如果原來已經(jīng)定義了，難免會沖突。下面是一些解決思路。
2010-07-07
jQuery中append()方法用法實例
這篇文章主要介紹了jQuery中append()方法用法,以實例形式較為詳細的分析了append()方法的功能、定義與使用技巧,并對比分析了與text()方法的區(qū)別,需要的朋友可以參考下
2014-12-12
基于jquery的on和click的區(qū)別詳解
下面小編就為大家分享一篇基于jquery的on和click的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
JQuery組件基于Bootstrap的DropDownList（完整版）
這篇文章主要介紹了JQuery組件基于Bootstrap的DropDownList的完整版，在原有基礎(chǔ)上進行完善功能，感興趣的小伙伴們可以參考一下
2016-07-07
JQuery模擬實現(xiàn)網(wǎng)頁中自定義鼠標(biāo)右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于利用JQuery模擬實現(xiàn)網(wǎng)頁中自定義鼠標(biāo)右鍵菜單功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
javascript原生和jquery庫實現(xiàn)iframe自適應(yīng)高度和寬度
這篇文章主要介紹了javascript原生和jquery庫實現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度,需要的朋友可以參考下
2014-07-07
Jquery中的offset()和position()深入剖析
jquery 中有兩個獲取元素位置的方法offset()和position()，這兩個方法之間有什么異同？使用的時候應(yīng)該注意哪些問題？什么時候使用offset(),什么時候又使用position()呢？
2009-05-05