为啥“数字”类型的 html 输入允许在字段中输入字母“e”？

Posted 2023-02-18

【中文标题】为啥“数字”类型的 html 输入允许在字段中输入字母“e”？

【英文标题】：Why does the html input with type "number" allow the letter 'e' to be entered in the field?为什么“数字”类型的 html 输入允许在字段中输入字母“e”？

【发布时间】：2015-10-20 19:08:44

【问题描述】：

我有以下 html5 输入元素：

<input type="number">

为什么这个输入允许在输入字段中输入字符“e”？无法输入其他字母字符（如预期的那样）

使用 chrome v. 44.0.2403.107

下面的例子来看看我的意思。

<input type="number">

【问题讨论】：

它还允许您在某些浏览器中多次输入+、-和.。

【参考方案1】：

  <input type="number" onKeyDown=(e) =>["e", "E", "+", "-"].includes(e.key) && e.preventDefault() >

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?

【参考方案2】：

简单标准的解决方案：在Angular/Js/Ts中你可以使用正则表达式来限制任何输入键。

HTML：<input type="text" name="input1" (keypress)="numericOnly($event)" />

TS：

    numericPattern = /^[0-9]*$/;
    numericOnly(event)
       return this.numericPattern.test(event.key);
    

【参考方案3】：

排除除整数之外的所有内容的简单解决方案

<input  
    type="number"
    min="1" 
    step="1"
    onkeypress="return event.keyCode === 8 || event.charCode >= 48 && event.charCode <= 57">

此解决方案不会阻止复制和粘贴（包括字母“e”）。

【讨论】：

智能解决方案

这个不错

【参考方案4】：

E 代表指数，用于缩短长数字。由于输入是数学输入，而指数在数学中是为了缩短大数，所以这就是 E 的原因。

显示如下：4e.

链接：1 和 2

【参考方案5】：

角度；带有 IDE keyCode 已弃用警告

功能与 rinku 的答案相同，但具有 IDE 警告预防功能

numericOnly(event): boolean 
    // noinspection JSDeprecatedSymbols
    const charCode = (event.which) ? event.which : event.key || event.keyCode;  // keyCode is deprecated but needed for some browsers
    return !(charCode === 101 || charCode === 69 || charCode === 45 || charCode === 43);

【参考方案6】：

强制使用仅由数字组成的数字的最佳方法：

<input type="number" onkeydown="javascript: return event.keyCode === 8 ||
event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

这避免了'e'、'-'、'+'、'.' ...所有不是数字的字符！

只允许数字键：

isNaN(数字(event.key))

但接受 "Backspace" (keyCode: 8) 和 "Delete" (keyCode: 46) ...

【讨论】：

注意这里会接受空格：空格的key是' '，Number(' ')等于0

添加 && !event.key == ' ' 解决空格问题。

【参考方案7】：

使用角度，你可以这样做来限制输入e,+,-,E

 <input type="number"  (keypress)="numericOnly($event)"/>


  numericOnly(event): boolean  // restrict e,+,-,E characters in  input type number
    debugger
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 101 || charCode == 69 || charCode == 45 || charCode == 43) 
      return false;
    
    return true;

  

【讨论】：

这将限制用户输入该字符？？

感谢您的帮助，我一直在寻找相同的角度解决方案，但现在我知道该怎么做，我将创建指令并完成任务感谢您的帖子

您可以创建最佳实践指令。您也可以直接在组件的 .ts 文件中进行操作！

【参考方案8】：

要隐藏字母 e 和减号 -，只需：

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"

【参考方案9】：

因为这正是the spec 所说的应该起作用的方式。数字输入可以接受floating-point numbers，包括负号和e或E字符（其中指数为e或E后面的数字）：

一个浮点数由以下部分组成，确切地说 以下顺序：

（可选）第一个字符可以是“-”字符。 “0—9”范围内的一个或多个字符。 （可选）以下部分，完全按照以下顺序：
一个“.”字符 “0—9”范围内的一个或多个字符
（可选）以下部分，完全按照以下顺序：
一个“e”字符或“E”字符 （可选）“-”字符或“+”字符 “0—9”范围内的一个或多个字符。

【讨论】：

啊，谢谢。我在看wrong spec

对此我仍然感到困惑，首先我不是数学家，那么“e”在数字的上下文中代表什么？其次，我不明白为什么 input.value 是一个空字符串，只要你在其中写一个“e”，即使有数字并且允许该字符......

@Simon，使用e 对于压缩大量数字很有用，否则输入起来会很乏味。举个简单的例子，2e2 = 2*10^2 = 200

@Simon "只要我写了 e"，嗯，是的，"4e" 不是一个数字，而例如 "4e+0" 是一个有效的数字（ 4）。如果您有一些使用部分用户输入的“实时”客户端 javascript 代码，您必须给用户时间来完成他的输入编辑以提供完整的价值，并且不会干扰到编辑的中途。如果您有来自“4e+0”输入的“未定义”，请修复您的“to number”解析器。问题中的示例运行良好，将“4e+1”报告为错误，“4e+0”正确返回为“4e+0”（即 1 到 5 之间的数字）。

@Anthony No，e 代表指数。

【参考方案10】：

我们可以让它变得像下面这样简单

<input type="number"  onkeydown="javascript: return event.keyCode == 69 ? false : true" />

更新答案

我们可以像@88 MPG 建议的那样让它变得更简单

<input type="number" onkeydown="return event.keyCode !== 69" />

【讨论】：

最好使用return event.keyCode !== 69，因为它避免了不必要的三元运算符。也不推荐内联。

这不会阻止在字段中复制粘贴 e 或 E

是否有任何其他类似于e 或E 的实例，非数学家可能不知道可以添加到此条件检查中？

@user1063287，这是本案唯一的例外

? 最终代码：onkeydown="return event.keyCode !== 69 && event.keyCode !== 187 && event.keyCode !== 189" 这可以防止 e、+ 和 -。跨度>

【参考方案11】：

HTML 输入数字类型允许“e/E”，因为“e”代表指数，它是一个数字符号。

例子200000也可以写成2e5。我希望这有助于谢谢你的问题。

【参考方案12】：

<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)"  >

function FilterInput(event) 
    var keyCode = ('which' in event) ? event.which : event.keyCode;

    isNotWanted = (keyCode == 69 || keyCode == 101);
    return !isNotWanted;
;
function handlePaste (e) 
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) 
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    
;

【讨论】：

您对这将防止插入带有复制和粘贴功能的“E”字符有多大信心？

刚刚检查，你是对的，复制粘贴输入无效。

你是对的@StephenKelzer。我添加了代码来处理它。