为什么输入类型为“ number”的html输入允许在字段中输入字母“ e”?


Answers:


217

因为这正是规范所说的应该工作的方式。输入的数字可以接受浮点数,包括负eE字符(其中指数是e或之后的数字E):

浮点数由以下几部分组成,按照以下顺序:

  1. 可选地,第一个字符可以是“ -”字符。
  2. 0—9” 范围内的一个或多个字符。
  3. 可选地,以下部分按完全相同的顺序排列:
    1. 一个“ .”字符
    2. 0—9” 范围内的一个或多个字符
  4. 可选地,以下部分按完全相同的顺序排列:
    1. e”字符或“ E”字符
    2. (可选)“ -”字符或“ +”字符
    3. 0—9” 范围内的一个或多个字符。


4
我仍然对此感到困惑,首先我不是数学家,那么“ e”在数字的背景下代表什么?其次,我不明白为什么在输入有“ e”的情况下,即使有数字并且允许使用字符,input.value还是一个空字符串……
Simon

9
@Simon,使用e可以压缩大量的数字,否则将很难输入。作为一个简单的例子,2e2 = 2*10^2 = 200
Gnarlywhale '16

3
@Simon “只要我写了e”,是的,“ 4e”不是数字,而例如“ 4e + 0”是有效数字(4)。如果您有一些“实时的”客户端javascript代码与部分用户输入一起使用,则必须给用户时间来完成其输入编辑,以提供全部价值,而不会干扰编辑的一半。如果从“ 4e + 0”输入中获得“未定义”,请修复“至数字”解析器。问题中的示例运行良好,报告“ 4e + 1”为错误,并且“ 4e + 0”正确返回为“ 4e + 0”(即1到5之间的数字)。
Ped7g

4
@Anthony不,e代表指数。
Scott Marcus

62

我们可以像下面这样简单

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

更新的答案

我们可以按照@ 88 MPG的建议将其简化

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


17
最好使用return event.keyCode !== 69它,因为它避免了不必要的三元运算符。也不会建议内联。
亚当·弗拉蒂诺

5
但是,这不会阻止复制粘贴eE在现场进行
molamk

18

HTML输入数字类型允许使用“ e / E”,因为“ e”代表数字符号的指数。

示例200000也可以写为2e5。希望这对您的提问有所帮助。          


12

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

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

这样可以避免使用“ e”,“-”,“ +”,“。”。...所有不是数字的字符!

仅允许数字键:

isNaN(Number(event.key))

但接受“退格”(键代码:8)和“删除”(键代码:46)...


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

2
您是否有信心防止复制和粘贴功能插入'E'字符?
StephenKelzer '16

1
刚刚检查,您是正确的,它不适用于复制和粘贴输入。
Gnarlywhale '16

您是正确的@StephenKelzer。我添加了代码来处理。
TruthSeeker '16

4

要隐藏字母e和减号,-只需:

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

3

您可以使用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;

  }

2
这将限制用户输入该字符?
艾米(Amy)

1
感谢您的帮助,我一直在寻找相同的角度解决方案,但现在我已经知道如何做到这一点,我将创建指令并完成任务,谢谢您的帖子
Amy

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

0

角度 不推荐使用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);
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.