Question

我有一个html输入框，但只有数字数据才是数据。我该如何强制执行？

Answer 1

您可以使用HTML5在不使用JavaScript的情况下验证输入的类型。但是，并非所有浏览器都支持此方法。

<input type="number" name="quantity" min="1" max="5">

使用以下属性指定限制（如here所述）：

max - 指定允许的最大值
min - 指定允许的最小值
步骤 - 指定合法的号码间隔
值 - 指定默认值

Answer 2

您需要一个事件来验证输入的文本是否为数字。请参阅示例代码

<强> JS

function isValidChar(char){

    var txt = char;
    var found = false;
    var validChars = "0123456789"; //List of valid characters

    for(j=0;j<txt.length;j++){ //Will look through the value of text
        var c = txt.charAt(j);
        found = false;
        for(x=0;x<validChars.length;x++){
            if(c==validChars.charAt(x)){
                found=true;
                break;
            }
        }
        if(!found){
            //If invalid character is found remove it and return the valid character(s).
            document.getElementById('txtFld').value = char.substring(0, char.length -1);
            break;
        }
    }
}

<强> HTML

<input type="text" id="txtFld" onKeyup="isValidChar(this.value);" />

请在此处查看工作代码jsfiddle

虽然代码有点长，但如果您知道如何使用正则表达式或jquery，则可以最小化。

Answer 3

尝试此操作，由您自己决定最小数量和最大数量：

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    width: 43%;
}

input {
    margin: 1rem 0;
}

label {
    display: inline-block;
    font-size: .8rem;
}

input:invalid + span:after {
    content: '✖';
    color: #f00;
    padding-left: 5px;
}

input:valid + span:after {
    content: '✓';
    color: #26b72b;
    padding-left: 5px;
}

 <span class="validity"></span>

<input type="number" id="userId" name="userId"
           placeholder="Min: 1, max: 10000"
           min="1" max="10000" />
    <span class="validity"></span>

Answer 4

Number（）是你想要的功能“123a”返回NAN

parseInt（）截断尾随字母“123a”返回123

<input type="text" id="txtFld" onblur="if(!Number(this.value)){alert('not a number');}" />

jsfiddle

Answer 5

试试这段代码。甚至在ctrl + v（粘贴）...

上工作

<SCRIPT Language ="VBScript"> 

sub onlyNumber(idBox)

    Set objInl = CreateObject("VBScript.RegExp")

    objInl.Global = True

    objInl.Pattern = "[^0-9\-\.]"

    document.getElementById(idBox).value = objInl.Replace(document.getElementById(idBox).value, "")

    set objInl = nothing

end sub

</SCRIPT>

 <input type="text" id="txtFld" onKeyup="onlyNumber(this.id);" />

Answer 6

<input name="txtnumbersOnly"  type="text" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">

Answer 7

使用java脚本函数作为验证器。或者你也可以获得jquery函数。

如何限制html输入框以便它只接受数字输入？

7 个答案: