我有以下html5输入元素:

<input type="number">

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

使用chrome v. 44.0.2403.107

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

= >“当家”型输入<


因为这正是规范所规定的。数字输入可以接受浮点数,包括负号和e或e字符(其中指数是e或e后面的数字):

A floating-point number consists of the following parts, in exactly the following order: Optionally, the first character may be a "-" character. One or more characters in the range "0—9". Optionally, the following parts, in exactly the following order: a "." character one or more characters in the range "0—9" Optionally, the following parts, in exactly the following order: a "e" character or "E" character optionally, a "-" character or "+" character One or more characters in the range "0—9".


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

我们可以像下面这样简单

<input type="number" onkeydown="javascript:返回事件。keyCode == 69 ?/> . False: true

更新后的答案

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

<输入类型=“编号”=“回归事件”。键盘代码!


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

例200000也可以写成2e5。我希望这能帮到你,谢谢你的问题。


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

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

这避免了'e', '-', '+', '。“…所有不是数字的字符!

若要只允许数字键,请使用数字函数转换为数字。如果不是数字,则结果为NaN:

isNaN(当家(基)事件。

但接受退格,删除,左箭头,右箭头:

[个’,‘删除’‘ArrowLeft’,‘ArrowRight includes(事件。代码)

这是为允许空格的Firefox设置的:

event.code != =“空间”


要隐藏字母e和负号,可以这样做:

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

使用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;

  }

角;与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);
}

一个简单的解决方案,排除除整数

<输入 类型=“数字” min=“1” 步骤=“1” onkeypress=“return event.keyCode === 8 ||事件.字符代码 >= 48 &&; 事件.字符代码 <= 57“>

此解决方案不防止复制和粘贴(包括字母“e”)。


E代表指数,用来缩短长数字。因为输入是数学输入而指数在数学中是用来缩短数字的,所以这里有个E。

显示如下:4e。

链接:1和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);
    }

上述解决方案只适用于普通html。 对于reactJS,我建议你这样做

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

如果你按下一个键,它的计算机语言相当于69,它就不会输入

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

最简单的解决方案是parseInt()。

<input type="number" onkeyup="this.value = parseInt(this.value); this.paste(this.onkeyup);"/>

ParseInt()对于E, E, +, -和任何不是数字的东西返回空白(NaN)。

使用onkeyup和keydown根据您的方便与粘贴事件。对我来说,onkeyup工作最好。这也适用于复制粘贴


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