input type='number' 可以输入e问题的解决方案

前言：我们日常开发中会遇到input的不同type的使用，比如说 checkbox、file、date、time......

其中type='number' 这个类型相信大家也遇到可以输入"e"的问题：

先看代码：

js 复制代码

import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const handleInput = (e) => {
    const input = e.target.value;
   
      setValue(input);
   
  };
  return (
    <>
      <input type='number' value={value} onChange={handleInput} />
    </>
  );
}

export default App;

输入后发现还可以输入 "e"?(同样问题在Material UI 的TextField使用中，也会出现该问题)

input type='number' 中为什么可以输入"e"呢？以下为百度搜索的资料

在HTML的input元素中，type属性为"number"的输入框通常用于接收数字输入。然而，即使设置了"type=number"，输入框仍然允许输入科学计数法表示的数字，包括 "e" 或 "E"。

科学计数法是一种表示非常大或非常小的数字的方法，通过使用乘以10的幂来表示。例如，1亿可以表示为1e8，0.000001可以表示为1e-6。

因此，当用户在"type=number"的输入框中输入类似于"1e8"或"1e-6"的值时，浏览器会将其解释为相应的科学计数法表示的数字，并将其视为有效的输入。但需要注意的是，并非所有浏览器都支持科学计数法的输入，因此在实际使用中可能会有一些差异。

我想到的方法：在setValue之前加个正则判断，为纯数字才让它set进去

前言：

1、在if判断中需要加 input==="" ， 因为可以让输入的数字清空

js 复制代码

function App() {
  const [value, setValue] = useState('');
  const handleInput = (e) => {
    const reg = /^\d+$/;
    const input = e.target.value;
    if (reg.test(input) || input === '') {
      console.log('输入的值为:', input);
      setValue(input);
    }
  };
  return (
    <>
      <input type="number" value={value} onChange={handleInput} />
    </>
  );
}

我在此处连续输入：123e45 结果会存在帮我清空输入框的问题

造成分析：当我输入123e的时候，控制台输出：输入的值为空==>""（什么原因我也不清楚），因为输入的值变成了"" ，所以进入到我们if判断中的input===""，所以setValue成功

解决方法：换个思路把 input 标签中的 type="number"删除，把他当做一个普通的输入框去使用，再使用纯数字的正则去匹配value

js 复制代码

import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const handleInput = (e) => {
    const reg = /^\d+$/;
    const input = e.target.value;
    if (reg.test(input) || input === '') {
      console.log('输入的值为:', input);
      setValue(input);
    }
  };
  return (
    <>
      <input value={value} onChange={handleInput} />
    </>
  );
}

export default App;

上图：我再次输入：123e456

问题已经解决！

总结：没什么难点，只是一开始的方向有错误，换一种思维！！！