input type=number 能输入e的问题

发表于 | 分类于

一个只能输入数字的input标签，这样的需求我下意识的加上了type=number属性，然后飞快的实现功能逻辑就提交了。毕竟真的太寻常的需求。但是测试时才发现原来以前都有些问题，只是我一直没有发现。

原来这样设置之后，用户是还能够输入e这个字符的。

数学中e等于2.71828！

并且在科学计数法中允许字母e或E的后面，跟着一个整数，表示这个数值的指数部分：

  1. 小数点前的数字多于21位；
  2. 小数点后的零多于5个。

因此在e在这种情况下是被当做数字看待的。但对于普通用户来说可能是用不上的，而且会产生疑惑，我们还是要把这个禁用掉。

如果我们使用原生的HTML，我们只需做以下处理：

1
<input  type="number" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"/>

在React中：

1
2
3
4
5
6
7
8
9
handleKeyPress(event) {
  const invalidChars = ['-', '+', 'e', '.', 'E']
  if(invalidChars.indexOf(event.key) !== -1){
    // react中用的不是原生事件，所以return false 没用
    event.preventDefault()
  }
}
//render
<input type="number" onKeyPress={this.handleKeyPress}>

参考

how-to-block-e-in-input-type-number

e=2.71828

https://javascript.ruanyifeng.com/grammar/number.html

0%