caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開發(fā)_APP開發(fā),低調(diào)、敢創(chuàng)新、有情懷!
南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
小程序
tel-icon全國服務(wù)熱線:400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

表單字段自動(dòng)切換焦點(diǎn)實(shí)現(xiàn)方法

百恒網(wǎng)絡(luò) 2017-02-08 4810

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



? ? ? ?表單字段自動(dòng)切換焦點(diǎn)實(shí)例
? ? ? ?


? ? ? ?


? ? ? ? ? ? ?

Enter your telephone number:


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




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

400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開百恒網(wǎng)絡(luò)小程序

歡迎您的光顧,我們將竭誠為您服務(wù)×

售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售后服務(wù) 售后服務(wù)
 
售后服務(wù) 售后服務(wù)
 
備案專線 備案專線
 
×