Yet Another Enter To Tab jQuery Plugin

雖然按 Tab 切換輸入焦點已是Windows操作的普遍慣例,但每回在寫作業平台網站時,規格中總少不了"要能直接按 Enter 切換到下一個輸入欄位"的要求。網路上已經有很多在網頁上用 Enter 取代 Tab 移動焦點的 jQuery Plugin,但很可惜沒有一個100%滿足我的需求,所以,這世上又再多了一個用 Enter 取代 Tab 的 jQuery 套件 (Yet Another Enter To Tab) 囉!

它主要提供以下功能:

  • 允許使用者以"Enter"取代"Tab"鍵移動焦點
  • 支援 input, select 及 button
  • 依照 tabindex 決定焦點順序
  • 自動略過 tabindex==-1, 唯讀(readonly), 停用(disabled), 隱藏(invisible) 狀態的輸入欄位
  • 支援群組化,焦點只會在同群組的欄位間循環
  • 欄位可設成按 Enter 時略過,按 Tab 可取得焦點

基本用法

$(selector).enableEnterToTab();

在容器元素呼叫 enableEnterTab() 即可為其中的輸入欄位 (包含 input, select, button. Enter 鍵在textarea 代表換行,故 textarea 會納入焦點循環,但不支援Enter2Tab ) 加上 Enter2Tab 功能。取得焦點的順序完全依照 tabindex 與元素在 DOM 的順序無關。如果你想在 Enter 切換焦點時略過某個欄位,請加上特別 CSS 名稱 "e2t-ignore" 。

<input type="text" tabindex="2" />  
<input type="text" tabindex="3" class="e2t-ignore" />
<input type="text" tabindex="4" />

在 input tabindex=2 按 Enter,焦點會移至 input tabindex=4;在 input tabindex=2 按 Tab 則會將焦點移到 input tabindex=3。

Screenshot 
圖1 Field 5 被指定了class="e2t-ignore",故在按 Enter 切換焦點時會被略過,但按 Tab 切換焦點時則可取得焦點。
注意: 瀏覽器UI上的輸入控制項也屬於 Tab 切換焦點的循環範圍,在上例中,在 Field 4 按下 Tab 後,焦點會移至瀏覽器的網址列。如果希望 ya-enter2tab 接管 Tab 鍵,可使用參數: .enableEnter2Tab({ captureTabKey: true })。

焦點移動規則

每次按下 Enter ,ya-enter2tab 會先在容器內找出所有可以取得焦點的候選人。其中,具有正數 tabindex 屬性的 input, select,button, textarea 會是候選人,ya-enter2tab 會將其依 tabindex 排序,與目前焦點所在欄位的 tabindex 相比,找出下一個取得焦點的對象。

Screenshot
圖2 在 Form 1 裡,每一個 Field N 欄位代表其 tabindex 也被設成 N ,ya-etner2tab 會 tabindex 大小決定焦點移動順序,與其在網頁的擺放位置無關。

<input type="text" tabindex="2" />  
<input type="text" tabindex="3" readonly />
<input type="text" tabindex="4" disabled />
<input type="text" tabindex="5" style='display:none' />
<input type='text' tabindex='6' />

上例中,在 input tabindex=2 按 Enter 或 Tab ,焦點會移至 input tabindex=6 。若使用jQuery 對 input tabindex=3 removeAttr("readonly"),再按下 Enter 或 Tab ,則焦點會移至 input tabindex=3 。

 

Screenshot
圖3 一開始,焦點循環會略過被隱藏的 Field 5 及停用中的 Field 7 ,利用下方按鈕執行JavaScript顯示 Field 5 並啟用 Field 7 後,二者即會納入焦點循環中。

焦點循環分群

你可以將欄位放入不同容器,例如: div A 及 div B,並在二者分別執行 .enableEnterToTab() 。 當在 div A 的欄位中按下 Enter 或 Tab ,焦點只會在 div A 內部的欄位切換,不會跑到 div B 的欄位。這個功能在同一網頁有不同輸入區塊時特別有用。

預設焦點循環分群效果只在按 Enter 時有效,若你希望按 Tab 時也保有相同效果,可透過 .enableEnter2Tab({ captureTabKey: true }) 參數讓 ya-enter2tab 攔截 Tab 按鍵事件避免焦點移出容器或跑到瀏覽器地址列。

Screenshot
圖4 焦點循環分群

LIVE DEMO

Online Demo

原始碼

https://github.com/darkthread/jquery.ya-enter2tab

歡迎推文分享:
Published 26 April 2014 12:58 PM 由 Jeffrey
Filed under:
Views: 9,499



意見

# 小柯 said on 01 July, 2014 03:59 AM

請問是否有方法區分鍵盤上的兩個ENTER鍵???

想把數字區的ENTER做不同用途..

但對網頁來說 ENTER好像都一樣的代碼..

# Jeffrey said on 01 July, 2014 10:10 PM

to 小柯,依我的理解,二顆Enter的KeyCode及ASCII COde都是13,從瀏覽器的角度無從分辨。(參考: unixpapa.com/.../key.html)

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<April 2014>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication