jquery 按鍵盤上的enter事件
接下來我們使用Jquery實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn),此代碼在常用瀏覽器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4測(cè)試通過。
使用的開發(fā)工具是微軟VS2010+Jquery框架
實(shí)現(xiàn)步驟如下
1、首先引用Jquery類庫(kù)
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2、Javascript代碼
<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事件冒泡的作用。
- 按Enter鍵觸發(fā)事件的jquery方法實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)按Enter鍵觸發(fā)事件示例
- 基于jquery的button默認(rèn)enter事件(回車事件)。
- jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
- 修改jQuery.Autocomplete插件 支持中文輸入法 避免TAB、ENTER鍵失效、導(dǎo)致表單提交
- 基于Jquery的實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn)
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊
- 基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab )
- jQuery響應(yīng)enter鍵的實(shí)現(xiàn)思路
- jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
相關(guān)文章
jQuery+Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測(cè)
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測(cè),針對(duì)用戶注冊(cè)時(shí)出現(xiàn)的用戶名重名問題進(jìn)行自動(dòng)檢測(cè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法,涉及jquery實(shí)現(xiàn)圖文滑動(dòng)切換效果的方法,涉及jquery針對(duì)頁面元素與樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫query鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02Axios和Jquery實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了Axios+Jquery實(shí)現(xiàn)文件上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08jQuery獲取訪問者IP地址的方法(基于新浪API與QQ查詢接口)
這篇文章主要介紹了jQuery獲取訪問者IP地址的方法,實(shí)例分析了jQuery基于新浪API與QQ查詢接口獲取來訪者IP的相關(guān)參數(shù)傳遞與數(shù)據(jù)處理技巧,需要的朋友可以參考下2016-05-05在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹形菜單,而這些樹形菜單都是使用樹形插件zTree來制作的,下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)
下面小編就為大家?guī)硪黄猨Query的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08