When the input tag type is number, the input of E, e, -, + is blocked

When we put the label <input> Of type Set to number when , You cannot enter a string other than a number , Only E,e,-,+ With the exception of .

So when you type E,e,-,+ In fact <input> What does the value of become ？ I recorded the actual input at that moment .

<input id="input" type="number" />

document.getElementById('input').addEventListener("input", event => {
    
  var value = event.target.value;
  console.log(value, typeof value, value.length);
});

The output is ：

As shown in figure shows , Is a length of 0 Empty string for .

Although here value Becomes a length of 0 Empty string for , The input characters are left in the input box . So how to prevent such invalid character input ？ The solution is as follows ：

document.getElementById('input').addEventListener("keydown", event => {
    
  let {
     key } = event;
  event.returnValue = /[0-9\bBackspace\b]/.test(key);
});

Here we are listening <input> Of keydown event , When the keyboard is pressed , You can listen to which key is pressed . If it is not the number key and the back key, this input is not allowed . This will ensure that each input is a number .