我有以下html5输入元素:
<input type="number">
为什么这个输入允许在输入字段中输入字符“e”?无法输入其他字母字符(如预期的那样)
使用chrome v. 44.0.2403.107
下面的例子来看看我的意思。
因为这正是规范所说的它应该如何工作。数字输入可以接受浮点数,包括负号和e或E字符(其中指数是e或E后面的数字):
e
E
浮点数由以下部分组成,确切地说 可选地,第一个字符可以是“-”字符。 范围"0—9"中的一个或多个字符。 可选,以下部分,完全按照以下顺序: “.”字符 "0—9"范围内的一个或多个字符 李< / ol > < / > 可选,以下部分,完全按照以下顺序: “e”字符或“E”字符 可选,"-"字符或"+"字符 范围"0—9"中的一个或多个字符。 李< / ol > < / >
-
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: 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'" />
To allow number keys only, convert to number with Number function. If this is not a number, the result is NaN :
Number
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; }
功能上与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。
链接:1和2
简单而标准的解决方案:在Angular/ Js/ Ts中,你可以使用正则表达式来限制任何输入键。
HTML: <input type="text" name="input1" (keypress)="numericOnly($event)" />
<input type="text" name="input1" (keypress)="numericOnly($event)" />
TS:
numericPattern = /^[0-9]*$/; numericOnly(event){ return this.numericPattern.test(event.key); }
<input type="number" onKeyDown={(e) =>["e", "E", "+", "-"].includes(e.key) && e.preventDefault()} >
如果你按下一个键,它的计算机语言相当于69,它就不会输入
<input type="number" onkeyup="this.value = parseInt(this.value); this.paste(this.onkeyup);"/>
ParseInt()对于E, E, +, -和任何不是数字的东西返回空白(NaN)。
使用onkeyup和keydown根据您的方便使用paste事件。对我来说,onkeyup工作最好。这也适用于复制粘贴
onkeyup
keydown
paste