请求解决<input type="number">按下E、+、-时内容清空及拦截输入问题

这个问题我之前也碰到过！核心原因是你当前的parseInt处理逻辑在遇到E、+、-这类字符时会返回NaN，进而导致Math.max(0, NaN)得到0，最终把输入框内容清空了。这里有两个靠谱的解决方案：

方法1：从输入源头阻止禁止字符 #

通过监听onKeyDown事件，直接阻止E、+、-这些字符的默认输入行为，从根源上避免无效字符进入输入框：

<input 
  type="number" 
  id="phone" 
  required 
  data-length="10" 
  defaultValue={this.state.formValues.phone} 
  onKeyDown={(e) => {
    // 定义需要阻止的字符，包含大小写E、+、-
    const forbiddenKeys = ['e', 'E', '+', '-'];
    if (forbiddenKeys.includes(e.key)) {
      e.preventDefault();
    }
  }}
  onInput={(e) => { 
    // 加 || 0 防止极端情况下parseInt返回NaN
    e.target.value = Math.max(0, parseInt(e.target.value) || 0).toString().slice(0, 10); 
  }} 
/>

这样用户按下这些键时，输入框不会有任何变化，原有内容也能稳稳保留。

方法2：输入后清理无效内容（更健壮） #

如果担心有其他场景（比如粘贴包含无效字符的内容），可以直接在onInput事件里过滤掉所有非数字字符，只保留有效内容并限制长度：

<input 
  type="number" 
  id="phone" 
  required 
  data-length="10" 
  defaultValue={this.state.formValues.phone} 
  onInput={(e) => {
    // 过滤掉所有非数字字符
    const cleanedValue = e.target.value.replace(/[^0-9]/g, '');
    // 限制最大长度为10位
    e.target.value = cleanedValue.slice(0, 10);
  }} 
/>

这种方法不需要额外的按键监听，不管用户是手动输入还是粘贴内容，都会自动清理掉E、+、-这类无效字符，同时保留原有数字内容，体验更流畅。

内容的提问来源于stack exchange，提问作者Mayank Bansal