瀏覽器支持
<input type="number"> 目前主要是chorme支持, safari和IE都不支持.
請(qǐng)注意safari不支持的話, 就意味著在iphone上用chorme也不支持, 因?yàn)閕phone上的chorme還是safari的內(nèi)核.
下圖為iphone內(nèi)chorme截圖,
image.png
奇葩的是改成type="number"之后, focus之后默認(rèn)彈出的是數(shù)字輸入, 但是內(nèi)容不做任何限制
字符限制
以下為支持該類型時(shí),能允許輸入的全部字符.
image.png
如果測(cè)試人員比較雞毛, 堅(jiān)持認(rèn)為
e, -, +不屬于數(shù)字類型, 抓緊棄用.如果你覺得可以加過(guò)濾去干掉這幾個(gè)字符, 參考下一段內(nèi)容.
Andriod的坑
用type="number"很友好的一點(diǎn)就是在手機(jī)上訪問(wèn)時(shí), 都會(huì)默認(rèn)彈出數(shù)字小鍵盤或者數(shù)字輸入?yún)^(qū)域.
在我測(cè)試的android機(jī)上, 甚至只能停留在數(shù)字輸入小鍵盤上, 不能切換.
但是根據(jù)不同的系統(tǒng), 三星(S6)的小鍵盤是純數(shù)字的, 不包含- +這種符號(hào), 但是華為(mate 30)的就默認(rèn)包含- +.
奇葩的是, 此時(shí)輸入-或者+根本不觸發(fā)onChange事件, 但是輸入純數(shù)字就可以觸發(fā).
改成type="text"之后, onChange事件又完美觸發(fā)了.
順便說(shuō)下keyDown, keyUp, keyPress等事件在手機(jī)端都不支持.
解決方案
react寫法舉例:
<input
value={value}
type="text"
onChange={e => {
if(/^\d*\.?\d*$/.test(e.target.value)) {
setValue(e.target.value)
}
}}
>
簡(jiǎn)單來(lái)說(shuō)就是正則過(guò)濾, 放棄type=number.
