Input輸入框type=number時仍然可以輸入特殊字符-、+、e的解決方案

     一、起因

同事用了輸入框type=number但測試的時候發現 - 、+ 、 e 都可以輸入 

<input type="number" />

查閱了這個屬性目前瀏覽器的支持程度

 

查閱後發現 type = number 在手機瀏覽器端的支持率很低。表裏顯示IOS 13.4支持了這個屬性，但實測發現雖然彈起了數字鍵盤，但是仍然可以輸入特殊字符。

最奇葩的是當你在支持這個屬性的web瀏覽器端使用 type = number 時，輸入 + 、- 、e時，是不會觸發onChange的，以至於本來想在onChange時加正則去過濾的方案失敗了。

     二、解決

博主最後直接放棄了 type = number 改成 type = text ，然後用正則一招制敵。限制只能輸入數字和一個小數點。

這裏注意一下傳入的是字符串，如果需要數字類型需要強制轉換Number一下

<input 
    type="text"
    onChange={e => if(/^\d*\.?\d*$/.test(e.target.value)) { this.setInput(e) }}
    value={this.state.inputVal} />