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



? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?

Enter your telephone number:

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

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