快捷導(dǎo)航

通過上下左右鍵和回車鍵切換光標(biāo)實(shí)現(xiàn)代碼

更新時間：2013年03月08日 14:31:34 作者：

客戶有這樣一個需求在列表中的文本框里輸入數(shù)據(jù)時，要能夠通過上下左右鍵來切換光標(biāo)，按回車鍵就把光標(biāo)移到下一個文本框，接下來將為你介紹下如何實(shí)現(xiàn)，感興趣的朋友可以參考下

做項(xiàng)目時，客戶提出這樣一個要求，在列表中的文本框里輸入數(shù)據(jù)時，要能夠通過上下左右鍵來切換光標(biāo)，按回車鍵就把光標(biāo)移到下一個文本框。這樣就省得一直去用鼠標(biāo)了，操作起來更方便。
不廢話，上代碼。

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

 
<asp:GridView id="gdv" runat="server" AllowPaging="True" PageSize="50" AutoGenerateColumns="False" 
EnableModelValidation="True" Width="100%" PagerStyle-HorizontalAlign="Center"> 
<PagerSettings Visible="False" /> 
<PagerStyle HorizontalAlign="Center" /> 
<RowStyle HorizontalAlign="Center" /> 
<Columns> 
<asp:TemplateField HeaderText="序號"> 
<ItemTemplate> 
<asp:Label ID="lbl" runat="server" Text="<%# Container.DataItemIndex+1%>"></asp:Label> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText="名稱"> 
<ItemTemplate> 
<asp:TextBox ID="BarCode" runat="server" Width="200px" MaxLength="10"></asp:TextBox> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText="數(shù)量"> 
<ItemTemplate> 
<asp:TextBox ID="SusFillCount" runat="server" Width="200px" onkeypress="if (event.keyCode < 48 || event.keyCode >57) event.returnValue = false;" MaxLength="5"></asp:TextBox> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 

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

 
jquery代碼 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("input").eq(0).focus(); 
$("input[type='text']").keydown(function() { 
var key = event.keyCode; 
switch (key) { 
case 37: //left 
{ 
if ($(this).parent().prev().length >= 1) { 
$(this).parent().prev().find("input").focus(); 
} 
break; 
} 
case 38: //up 
{ 
if ($(this).parent().parent().prev().length >= 1) { 
$(this).parent().parent().prev().children().children().eq($(this).parent().prevAll().length).focus(); 
} 
break; 
} 
case 39: //right 
{ 
if ($(this).parent().next().length >= 1) { 
$(this).parent().next().find("input").focus(); 
} 
break; 
} 
case 40: //down 
{ 
if ($(this).parent().parent().next().length >= 1) { 
$(this).parent().parent().next().children().children().eq($(this).parent().prevAll().length).focus(); 
} 
break; 
} 
case 13: //回車 
{ 
event.keyCode=9; 
break; 
} 
default: 
{ 
break; 
} 
} 
}); 
}); 
</script> 

搞定！

您可能感興趣的文章:

相關(guān)文章

jQuery使用load()方法載入另外一個網(wǎng)頁文件內(nèi)的指定標(biāo)簽內(nèi)容到div標(biāo)簽的方法
這篇文章主要介紹了jQuery使用load()方法載入另外一個網(wǎng)頁文件內(nèi)的指定標(biāo)簽內(nèi)容到div標(biāo)簽的方法,涉及jQuery中l(wèi)oad方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
JQuery對class屬性的操作實(shí)現(xiàn)按鈕開關(guān)效果
頁面中的按鈕開關(guān)效果想必大家都有見到過吧，接下來為大家詳細(xì)介紹下如何使用JQuery對class屬性的操作方法實(shí)現(xiàn)，感興趣的朋友不要錯過
2013-10-10
jQuery實(shí)現(xiàn)簡易的輸入框字?jǐn)?shù)計(jì)數(shù)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡易的輸入框字?jǐn)?shù)計(jì)數(shù)功能,結(jié)合實(shí)例形式分析了jQuery針對頁面元素屬性的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）
在公司做這個項(xiàng)目已經(jīng)6個多月了，總結(jié)一些問題，也算是拋磚引玉吧，希望更多的朋友一起分享一些技巧。
2010-03-03
jQuery對象和DOM對象相互轉(zhuǎn)化
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象；
2009-04-04
jQuery1.6 正式版發(fā)布并提供下載
據(jù)jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已經(jīng)可以下載使用。jQuery 1.6 版本包括了對屬性(Attribute)模型的重要重寫，還有諸多性能優(yōu)化。借此機(jī)會感謝jQuery開發(fā)團(tuán)隊(duì)和jQuery錯誤分類團(tuán)隊(duì)的成員。
2011-05-05
jQuery列表檢索功能實(shí)現(xiàn)代碼
要實(shí)現(xiàn)一個簡單的列表，右上角有一個檢索功能我們要實(shí)現(xiàn)的是列表檢索功能，具體實(shí)例代碼大家參考下本文
2017-07-07
jquery動態(tài)添加option示例
jquery動態(tài)添加option選項(xiàng)，還有動態(tài)刪除的方法，大家參考使用吧
2013-12-12
使用jQuery實(shí)現(xiàn)購物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購物車結(jié)算功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
cookie.js 加載順序問題怎么才有效
在使用cookie.js時，只有在jquery.js文件后加載整體才有效，下面與大家分享下有效加載順序，有此需求的朋友可以參考下
2013-07-07