When the Input input box type=number, you can still enter the solution of special characters -, +, e

     1. Cause

Colleagues used the input box type=number but found that -, +, e can be input during the test 

<input type="number" />

Check the current browser support for this property

 

After checking, I found that the support rate of type = number on the mobile browser side is very low. The table shows that IOS 13.4 supports this attribute, but the actual test found that although the numeric keyboard pops up, special characters can still be input.

The most amazing thing is that when you use type = number on the web browser that supports this attribute, when you enter +, -, e, onChange will not be triggered, so that the scheme that originally wanted to add regularity to filter when onChange failed up.

     Two, solve

In the end, the blogger directly gave up type = number and changed it to type = text, and then used a regular move to defeat the enemy. The limit is only numbers and a decimal point.

Note here that the input is a string. If you need a numeric type, you need to cast Number.

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