English 中文(简体)
我如何限制一个html输入箱,以便它只接受数字投入?
原标题:How can I limit a html input box so that it only accepts numeric input?
  • 时间:2011-04-12 06:50:55
  •  标签:
  • html

我有一个html输入箱,但只有数字数据。 我如何执行?

问题回答

你可以使用超文本5来验证你的输入类型,而不使用 Java本。 然而,这种方法没有得到所有浏览器的支持。

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

利用以下属性具体限制(如here):

  • max - specifies the maximum value allowed
  • min - specifies the minimum value allowed
  • step - specifies the legal number intervals
  • value - Specifies the default value

如果所输入的案文有点,你将需要开展一些活动来验证。 见抽样守则

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

<><><><>>><>>>>><>>>>>>

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

见以下工作文件:jsfiddle

虽然这部法典是你知道如何使用常规表述或分类的比喻的长点。

选择最低数目和最高比率:

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>

号码是你想要“123a”返回NAN的功能

par par

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

引证该法典。 甚至还从事剪辑工作。

<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);" />

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

利用 j印功能作为有效器。 或者你也可以获得 j。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签