快捷導(dǎo)航

基于Jquery的實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn)

更新時(shí)間：2010年09月14日 01:30:51 作者：

系統(tǒng)默認(rèn)情況下，使用Tab按鍵切換頁面元素的焦點(diǎn)，有沒有想過回車鍵Enter也可以實(shí)現(xiàn)這種功能，并且具有良好的用戶體驗(yàn)。

接下來我們使用Jquery實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn)，此代碼在常用瀏覽器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4測(cè)試通過。
使用的開發(fā)工具是微軟VS2010+Jquery框架。
實(shí)現(xiàn)步驟如下
1、首先引用Jquery類庫
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2、 Javascript代碼

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

 
<script type="text/javascript"> 
$(function () { 
$('input:text:first').focus(); 
var $inp = $('input:text'); 
$inp.bind('keydown', function (e) { 
var key = e.which; 
if (key == 13) { 
e.preventDefault(); 
var nxtIdx = $inp.index(this) + 1; 
$(":input:text:eq(" + nxtIdx + ")").focus(); 
} 
}); 
}); 
</script> 

分析：
$('input:text:first').focus();
頁面初始化時(shí)，焦點(diǎn)定位第一個(gè)文本框內(nèi)
var $inp = $('input:text');
取的type=文本框的元素集合
$inp.bind('keydown', function (e) {}
給文本框集合綁定'keydown'事件
var key = e.which;
取的當(dāng)前按下的鍵值比如Enter的鍵值=13
e.preventDefault();
可以阻止它的默認(rèn)行為的發(fā)生而發(fā)生其他的事情，在這里我們組織PostBack發(fā)生，而是切換焦點(diǎn)。另外一個(gè)相近的方法是stopPropagation，它起到阻止js事件冒泡的作用。
事件代理用到了兩個(gè)在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標(biāo)元素。當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候，比如說鼠標(biāo)點(diǎn)擊了一個(gè)按鈕，同樣的事件將會(huì)在那個(gè)元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個(gè)事件從原始元素開始一直冒泡到DOM樹的最上層。對(duì)任何一個(gè)事件來說，其目標(biāo)元素都是原始元素，在我們的這個(gè)例子中也就是按鈕。目標(biāo)元素它在我們的事件對(duì)象中以屬性的形式出現(xiàn)。使用事件代理的話我們可以把事件處理器添加到一個(gè)元素上，等待事件從它的子級(jí)元素里冒泡上來，并且可以很方便地判斷出這個(gè)事件是從哪個(gè)元素開始的。
var nxtIdx = $inp.index(this) + 1;
取的元素集合inp中的下一個(gè)元素索引
$(":input:text:eq(" + nxtIdx + ")").focus();
定位焦點(diǎn)到集合的下一個(gè)元素
3.、HTML代碼

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

 
<div> 
<asp:TextBox ID="txt1" runat="server" /><br /> 
<asp:TextBox ID="txt2" runat="server" /><br /> 
<asp:TextBox ID="txt3" runat="server" /><br /> 
<asp:TextBox ID="txt4" runat="server" /><br /> 
</div> 

分析：頁面上存放四個(gè)文本框
3、運(yùn)行程序

那頁面中如果有TextArea 元素，我們?nèi)绾问褂肊nter切換焦點(diǎn)呢，辦法是有的，如下充分運(yùn)用了Jquery的一些特性。

4、 HTML代碼

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

 
<div> 
<asp:TextBox ID="tb1" runat="server" class="cls" /><br /> 
<asp:TextBox ID="tb2" runat="server" class="cls" /><br /> 
<asp:TextBox ID="tb3" TextMode="MultiLine" runat="server" class="cls" /><br /> 
<asp:TextBox ID="tb4" runat="server" class="cls" /><br /> 
</div> 

分析：
頁面中所以的TextBox 引用Class=”cls”,便于后期的對(duì)頁面元素的Jquery查詢。

5、 Javascript代碼

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

 
<script type="text/javascript"> 
$(function () { 
$('input:text:first').focus(); 
var $inp = $('.cls'); 
$inp.bind('keydown', function (e) { 
var key = e.which; 
if (key == 13) { 
e.preventDefault(); 
var nxtIdx = $inp.index(this) + 1; 
$(".cls:eq(" + nxtIdx + ")").focus(); 
} 
}); 
}); 
</script> 