這篇文章主要介紹了一些常用的HTML5模式(pattern) 總結,包括一些常用的正則表達式整理,主要針對手機端網頁的製作,需要的朋友可以參考下
最近在做手機頁面時,遇到數字輸入的鍵盤的問題,之前的做法只是一刀切的使用type=tel,不過一直覺得九宮格的電話號碼鍵盤上的英文字母太礙事了。於是想要嘗試其它的實現方案,最終的結論卻令人沮喪。不過也趁機詳細了解了下pattern這個屬性。
type=tel 和type=number 的區別這裡還是先那麼先交代一下最初遇到的問題。其實無論是tel還是number都不是完美的:
type=tel
優點是iOS和Android的鍵盤表現都差不多
缺點是那些字母好多餘,雖然我沒有強迫症但還是感覺怪怪的啊。
type=number
優點是Android下實現的一個真正的數字鍵盤
缺點一:iOS下不是九宮格鍵盤,輸入不方便
缺點二:舊版Android(包括微信所用的X5內核)在輸入框後面會有超級雞肋的小尾巴,好在Android 4.4.4以後給去掉了。
不過對於缺點二,我們可以用webkit私有的偽元素給fix掉:
XML/HTML Code複製內容到剪貼板