我有以下html5输入元素:

<input type="number">

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

使用chrome v. 44.0.2403.107

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

= >“当家”型输入<


当前回答

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

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

其他回答

我们可以像下面这样简单

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

更新后的答案

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

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

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

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

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

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

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

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

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

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

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