最近做一個支付頁面,jsp,js
需要在安卓和ios上展示系統自帶的數字鍵盤。
百度下,是可以用 type=number來做,但是安卓和ios都出現了一些問題
安卓上type=number時,某些機型,輸入小數點“.”時,光標會自動往前跳格。使用type=tel,就能解決。
ios上的問題就比較惡心了。
因為我用了正則來替換非數字和只能出輸入兩位小數。
安卓和瀏覽器上輸入1.1.時,都能替換為1.1,而ios確全部替換,使整個輸入框為空。
經多番調整,測試,發現非正則問題。出現狀況為,type=number,ios有正則后,輸入兩個小數點,認為不是數字,則全部替換。而type=text,則能正常操作。
第二次,嘗試將type換為tel后,ios端出現的數字鍵盤是沒有小數點的,不符合情況。經百度,發現可以通過ios端替換數字鍵盤解決
field.keyboardType = UIKeyboardTypeDecimalPad 有ios端的小伙伴,就不用看下去了。
表示我沒有ios的小伙伴,只能在js上苦苦掙扎。
最終解決方案,是頁面初始化時,將type=number,這樣input獲取焦點時,系統鍵盤是數字鍵盤,input內容更改時,將type設為text。
你以為這就解決了嘛? no,man。
ios九宮格的數字鍵盤,小數點為逗號“,”,小數點“.”,和分好“;”合並的,在一定的時間段,點擊這三個的時候,會自動切換。你會發現意外的事,這個操作,會形成退格的效果。
好的,這時候 我就要告訴你,寫個自定義的鍵盤吧,孩子~
