为什么HTML中的type为"number"的输入框允许在字段中输入字母'e'？

Question

我有以下的HTML5输入元素：

<input type="number">

为什么这个输入框允许输入字符'e'？其他字母字符都无法输入（如预期的那样）。

使用Chrome v. 44.0.2403.107。

下面的示例可以帮助你理解我的意思。

<input type="number">

- Gnarlywhale

---

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

MDN文档对此进行了警告，并指向了有关该问题的详细讨论。 - Eric Mutta

Answer 1

因为这正是规范所规定的工作方式。数字输入可以接受浮点数，包括负号和e或E字符（指数是e或E后面的数字）：

浮点数由以下部分按照以下顺序组成：

1. 可选的，第一个字符可以是“-”字符。 2. 一个或多个范围在“0-9”的字符。 3. 可选的，以下部分按照以下顺序： * 一个“.”字符 * 一个或多个范围在“0-9”的字符。 4. 可选的，以下部分按照以下顺序： * 一个“e”字符或“E”字符 * 可选的，“-”字符或“+”字符 * 一个或多个范围在“0-9”的字符。

- j08691

---

我对此仍感到困惑。首先，作为非数学家，我想知道在数字的背景下，“e”代表什么意思？其次，即使允许输入数字和字符，“input.value”为什么在你输入“e”时就变成了空字符串呢？请帮我理解。 - Simon

@Simon，使用 e 可以很方便地表示一些较大的数字，否则将需要费时费力地进行输入。举个简单的例子，2e2 = 2*10^2 = 200。 - Gnarlywhale

@Ped7g 这正是问题所在！如果我想读取值并发现它是 200，无论如何我都不能这样做，因为一旦我写下“e”，input.value 就会返回 undefined。 - Simon

“一旦我写下 'e'，是的，“4e”不是一个数字，而例如“4e+0”是一个有效的数字（4）。如果您有一些针对部分用户输入工作的现场客户端JavaScript代码，则必须给用户时间完成其输入编辑以提供完整值，而不是在编辑过程中干扰。如果从“4e+0”输入获得“undefined”，请修复您的“转换为数字”的解析器。问题中的示例运行良好，将“4e+1”报告为错误，并正确返回“4e + 0”（即介于1和5之间的数字）。 - Ped7g

@Anthony，不，e 代表指数。 - Scott Marcus

Answer 2

我们可以让它变得很简单，就像下面这样。

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

更新的答案

正如 @88 MPG 提出的那样，我们可以使它更加简单。

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

- yasarui

---

最好使用return event.keyCode !== 69，避免不必要的三元运算符。同时也不建议内联。 - Adam Fratino

这并不会防止在该字段中复制粘贴 e 或 E。 - molamk

还有其他类似于 e 或 E 的实例，非数学专业人士可能不知道，可以添加到这个条件检查中吗？ - user1063287

@user1063287，这是唯一的例外情况。 - yasarui

最终代码：onkeydown="return event.keyCode !== 69 && event.keyCode !== 187 && event.keyCode !== 189" 这样可以防止按下 e、+ 和 - 键。 - GTS Joe

Answer 3

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

<input type="number" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'" />

避免使用 'e', '-', '+', '.' ... 所有非数字的字符！

为了只允许数字键，可以使用Number函数将其转换为数字。 如果不是数字，则结果为NaN：

isNaN(Number(event.key))

但接受Backspace、Delete、Arrow left、Arrow right：

['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code)

这适用于允许空格的Firefox：

event.code!=='Space'

- A. Morel

---

注意，此处将接受空格：空格的键为' '，Number(' ') 等于零。 - ehab

添加 && !event.key == ' ' 可以解决空格的问题。 - Geff

你错过了那里的“Tab”键，这会阻止用户使用Tab键来聚焦到下一个输入元素。 - Roni Tovi

Answer 4

HTML的数字输入类型允许使用 "e/E"，因为 "e" 代表指数，它是一个数值符号。

例如，200000也可以写成2e5。希望这可以帮到你，谢谢提问。

- Anon Cypher

Answer 5

<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();
    }
};

- user3248578

---

你对这能够防止使用复制粘贴功能插入'E'字符有多有信心？ - stephenkelzer

刚刚检查了一下，你是正确的，它对于复制粘贴的输入无效。 - Gnarlywhale

你是正确的 @StephenKelzer。我添加了代码来处理它。 - user3248578

Answer 6

排除非整数的简单解决方案

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

该解决方案无法防止复制和粘贴（包括字母“e”）。

- Jelle

---

很好的答案，但如果我还想允许小数值呢？你能指导我吗？ - deemi-D-nadeem

为了允许小数值，我建议查看@yasarui的答案。 - Jelle

Answer 7

要同时隐藏字母 e 和减号 -，只需使用以下代码：

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

- Austris Cirulnieks

Answer 8

E代表指数，它用于缩短长数字。由于输入是数学输入，并且指数是用于缩短大数字的数学符号，因此出现了E。

它的显示方式是这样的：4e。

链接：1和2

- Sur

Answer 9

valueAsNumber 可以胜任此工作（可复制/粘贴）

    <input type="number" oninput="this.value = this.valueAsNumber">

- bilelz

---

如果你输入"1"然后在后面粘贴"e123"是无法起作用的。 - undefined

Answer 10

使用Angular，您可以通过以下方式限制输入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;

  }

- Rinku Choudhary

---

这会限制用户输入该字符吗？ - Amy

感谢您的帮助，我正在寻找在Angular中相同的解决方案，但现在我知道该如何做了，我将创建指令并完成任务，感谢您的文章。 - Amy

你可以创建最佳实践的指令。同时，你也可以直接在组件的 .ts 文件中完成！ - Rinku Choudhary