React表单input设置type="number"仍可输入字母问题求助

问题原因 #

1. BMI输入框存在重复的type属性声明：你同时给BMI输入框写了type="number"和type="text"，浏览器解析时会默认取靠后的属性值，也就是最终生效的是type="text"，自然没有数字限制效果。
2. 体重输入框本身设置的是type="text"，仅添加的inputmode="numeric"属性仅作用于移动端唤起数字键盘，不会限制PC端输入字母等非数字内容。

修复方案 #

基础修复（仅改属性即可实现基础数字限制） #

修改两个输入框的type属性：

• 体重输入框：删除原type="text"，替换为type="number"
• BMI输入框：删除多余的type="text"，保留type="number"即可

修改后的对应代码片段如下：

{/* 体重输入框 */}
<input 
  inputmode="numeric" 
  class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" 
  id="grid-first-name" 
  type="number" 
  onChange={(e) => setWeight(e.target.value)} 
  placeholder="Weight" 
/>

{/* BMI输入框 */}
<input 
  type="number" 
  class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" 
  id="grid-last-name" 
  onChange={(e) => setBMI(e.target.value)} 
  placeholder="BMI" 
/>

进阶严格校验（禁止输入e、正负号等特殊字符） #

原生type="number"默认允许输入科学计数法相关的e、+、-字符，如果需要完全限制只能输入数字和小数点，可以在onChange事件里加一层内容过滤，示例如下：

{/* 以体重输入框为例 */}
<input 
  type="number" 
  onChange={(e) => {
    const value = e.target.value.replace(/[^0-9.]/g, '')
    setWeight(value)
  }} 
  placeholder="Weight" 
/>

正则/[^0-9.]/g会把所有非数字、非小数点的字符替换为空，就能实现完全限制输入内容的效果。

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