使用 JavaScript可以從多個方面增強表單字段的易用性。其中，常見的一種方式就是在用戶填寫 完當前字段時，自動將焦點切換到下一個字段。通常，在自動切換焦點之前，必須知道用戶已經(jīng)輸入了 既定長度的數(shù)據(jù)（例如電話號碼）。例如，中國的電話號碼通常會分為三部分：區(qū)號（86）、省區(qū)號和另外 8 位 數(shù)字。為取得完整的電話號碼，很多網(wǎng)頁中都會提供下列 3個文本框：?
? ? ? ??
? ? ? ?
? ? ? ?
? ? ? ?為增強易用性，同時加快數(shù)據(jù)輸入，可以在前一個文本框中的字符達到大數(shù)量后，自動將焦點切換到下一個文本框。換句話說，用戶在第一個文本框中輸入了 2個數(shù)字之后，焦點就會切換到第二個文 本框，再輸入 4個數(shù)字，焦點又會切換到第三個文本框。這種“自動切換焦點”的功能，可以通過下列代碼實現(xiàn)：



? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?

Enter your telephone number:

? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ?

? ? ? ?在此南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端工程師告訴大家 tabForward()函數(shù)是實現(xiàn)“自動切換焦點”的關(guān)鍵所在。這個函數(shù)通過比較用戶輸入的值 與文本框的 maxlength 特性，可以確定是否已經(jīng)達到大長度。如果這兩個值相等（因為瀏覽器終 會強制它們相等，因此用戶絕不會多輸入字符），則需要查找表單字段集合，直至找到下一個文本框。 找到下一個文本框之后，則將焦點切換到該文本框。然后，我們把這個函數(shù)指定為每個文本框的 onkeyup 事件處理程序。由于 keyup 事件會在用戶輸入了新字符之后觸發(fā)，所以此時是檢測文本框中內(nèi)容長度 的佳時機。這樣一來，用戶在填寫這個簡單的表單時，就不必再通過按制表鍵切換表單字段和提交表單了。 不過請記住，這些代碼只適用于前面給出的標記，而且沒有考慮隱藏字段。
? ?本文僅限內(nèi)部技術(shù)人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌APP開發(fā)公司-百恒網(wǎng)絡(luò) http://www.dgscpc.com/ 如轉(zhuǎn)載請注明出處!