为什么html输入类型"数字"允许使用字母'e'进入战场?

我有以下html5输入元素:

<input type="number">

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

使用chrome v. 44.0.2403.107

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

<input type="number">

251190 次浏览

因为这正是规范所说的它应该如何工作。数字输入可以接受浮点数,包括负号和eE字符(其中指数是eE后面的数字):

浮点数由以下部分组成,确切地说

  1. 可选地,第一个字符可以是“-”字符。
  2. 范围"0—9"中的一个或多个字符。
  3. 可选,以下部分,完全按照以下顺序:
    1. .”字符
    2. "0—9"范围内的一个或多个字符
    3. 李< / ol > < / >
    4. 可选,以下部分,完全按照以下顺序:
      1. e”字符或“E”字符
      2. 可选,"-"字符或"+"字符
      3. 范围"0—9"中的一个或多个字符。
      4. 李< / ol > < / >
<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: return event.keyCode == 69 ? false : true" />

Updated Answer

we can make it even more simple as @88 MPG suggests

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

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

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

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

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

this avoids 'e', '-', '+', '.' ... all characters that are not numbers !

To allow number keys only, convert to number with Number function. If this is not a number, the result is NaN :

isNaN(Number(event.key))

but accept Backspace, Delete, Arrow left, Arrow right :

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

This is for Firefox which allows spaces :

event.code!=='Space'

要隐藏字母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);
}

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

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

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

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

显示如下:4e。

链接:12

简单而标准的解决方案:在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"
/>

最简单的解决方案是方法用于()

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

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

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

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