jquery 按鍵盤上的enter事件

更新時(shí)間：2014年05月11日 12:15:01 作者：

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

接下來(lái)我們使用Jquery實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn)，此代碼在常用瀏覽器IE7， IE8， Firefox 3， Chrome 2 和 Safari 4測(cè)試通過(guò)。
使用的開(kāi)發(fā)工具是微軟VS2010+Jquery框架

實(shí)現(xiàn)步驟如下

1、首先引用Jquery類庫(kù)

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();

頁(yè)面初始化時(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事件冒泡的作用。

您可能感興趣的文章:

enter事件

相關(guān)文章

Jquery 跨域訪問(wèn) Lightswitch OData Service的方法
修改lightswitch .server project web.config。添加如下內(nèi)容就可以實(shí)現(xiàn)對(duì)ApplicationData.svc/跨域訪問(wèn)
2013-09-09
jQuery選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
選擇器是jQuery的核心，一個(gè)選擇器寫出來(lái)類似$('#dom-id')。下面給大家分享jQuery選擇器的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-07-07
easyui導(dǎo)出excel無(wú)法彈出下載框的快速解決方法
下面小編就為大家?guī)?lái)一篇easyui導(dǎo)出excel無(wú)法彈出下載框的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹(shù)形菜單，而這些樹(shù)形菜單都是使用樹(shù)形插件zTree來(lái)制作的，下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
jQuery模仿單選按鈕選中效果
單選按鈕以及復(fù)選按鈕的使用情況還是蠻多的,多選按鈕使用toggleClass()方法就可以實(shí)現(xiàn)，下面小編給大家介紹單選按鈕的實(shí)現(xiàn)，感興趣的朋友一起看下吧
2016-06-06
JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript與jQuery遍歷json格式數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-11-11
JQuery判斷正整數(shù)整理小結(jié)(jQuery 文本框中只能輸入正整數(shù))
這篇文章主要介紹了JQuery判斷正整數(shù)，附上詳細(xì)的代碼供大家查看具體的方法,需要的朋友可以參考下
2017-08-08
jQuery1.6 使用方法一
jQuery1.6 使用方法1，想要學(xué)習(xí)jquery的朋友可以參考下。
2011-11-11
jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類似淘寶首頁(yè)縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過(guò) jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷，但是當(dāng)不符合條件時(shí)，怎么跳出當(dāng)前循環(huán)，解決方法如下,需要的朋友可以參考下
2014-06-06