笔记-input type=‘number‘ 可以输入e问题

最新推荐文章于 2025-05-17 14:56:25 发布

大白砌墙

最新推荐文章于 2025-05-17 14:56:25 发布

阅读量953

点赞数 14

CC 4.0 BY-SA版权

文章标签：笔记 javascript 开发语言

本文链接：https://blog.csdn.net/java2508/article/details/138663150

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===“” ，因为可以让输入的数字清空

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

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;