偶然間發(fā)現(xiàn)的一個(gè)小問(wèn)題,一個(gè)登錄功能的小頁(yè)面,只需要輸入賬號(hào)和密碼用來(lái)驗(yàn)證登錄用,很久才有人發(fā)現(xiàn)這個(gè)問(wèn)題,就是當(dāng)你輸入完賬號(hào)點(diǎn)擊輸入密碼的時(shí)候,光標(biāo)直接就聚焦在了密碼輸入框當(dāng)中,但是如果你再要從密碼輸入框點(diǎn)擊回到賬號(hào)輸入框,重新輸入賬號(hào)信息或者修改賬號(hào)信息的時(shí)候,就會(huì)發(fā)現(xiàn),點(diǎn)一下沒(méi)得反應(yīng),得再點(diǎn)一下才能聚焦,如下圖
當(dāng)我從輸入密碼框,點(diǎn)擊到輸入工號(hào)框的時(shí)候,直接失去焦點(diǎn),無(wú)法直接輸入需要再次點(diǎn)擊才能繼續(xù)輸入。
其實(shí)代碼中并沒(méi)有出問(wèn)題,只是input框的type選擇出現(xiàn)了差異,導(dǎo)致這一情況的發(fā)生,這里面輸入的工號(hào)一般為純數(shù)字,我們的話type就直接用了number的屬性,其實(shí)使用number屬性沒(méi)有任何問(wèn)題,這里使用number或者tel都是可以方便用戶直接輸入工號(hào)的,但是我之前設(shè)置了number就會(huì)出現(xiàn)之前說(shuō)的這一幕,在密碼框回點(diǎn)到帳號(hào)框的時(shí)候,需要點(diǎn)兩下,而type設(shè)置成tel的話,直接就可以無(wú)縫切換很絲滑,所以沒(méi)有特殊要求的話,可以設(shè)置成tel來(lái)提高用戶的使用體驗(yàn)哦
最后說(shuō)一下type=number和type=tel的區(qū)別吧
在iOS中,input type="tel"和input type="number"是兩種不同的輸入類(lèi)型,它們有以下區(qū)別:
input type="tel":此輸入類(lèi)型常用于電話號(hào)碼的輸入,鍵盤(pán)上會(huì)顯示與電話號(hào)碼輸入相關(guān)的特殊字符
input type="number":此輸入類(lèi)型用于數(shù)值的輸入。它會(huì)限制用戶只能輸入數(shù)字,并且鍵盤(pán)上只顯示數(shù)字鍵盤(pán)。
總結(jié)input type="tel"適用于需要輸入電話號(hào)碼的場(chǎng)景,而input type="number"適用于需要輸入數(shù)值的場(chǎng)景