我有以下html5输入元素:

<input type="number">

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

使用chrome v. 44.0.2403.107

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

= >“当家”型输入<


当前回答

简单而标准的解决方案:在Angular/ Js/ Ts中,你可以使用正则表达式来限制任何输入键。

HTML: <input type=“text” name=“input1” (keypress)=“numericOnly($event)” />

TS:

    numericPattern = /^[0-9]*$/;
    numericOnly(event){
       return this.numericPattern.test(event.key);
    }

其他回答

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

简单而标准的解决方案:在Angular/ Js/ Ts中,你可以使用正则表达式来限制任何输入键。

HTML: <input type=“text” name=“input1” (keypress)=“numericOnly($event)” />

TS:

    numericPattern = /^[0-9]*$/;
    numericOnly(event){
       return this.numericPattern.test(event.key);
    }

最简单的解决方案是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!= =‘空间’" / >

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

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