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



? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?

Enter your telephone number:

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

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