不允许在<input type =“number”/>中键入字母字符

时间:2013-08-14 05:46:54

标签: javascript html html5 numbers

我需要一个文本框,每当输入内部时,只允许数字[0-9]。我使用type="number"肯定持有客户端验证,但也允许键入其他字母表。我可以通过跟踪每个keydown和匹配正则表达式来做到这一点,但我想知道是否有任何方法我可以限制只使用html标签键入并且不定义JavaScript中的任何函数以在每个keydown进行比较?

不足以执行此操作的代码是:

    <input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">

感谢任何帮助。

9 个答案:

答案 0 :(得分:19)

您可以使用jquery.numeric插件。

请参阅 here类似的问题。

$(document).ready(function(){
   $(".numeric").numeric();
});

答案 1 :(得分:14)

试试这个

定义javascript函数

允许数字的函数,带小数,如下所示

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
        return false;

    return true;
}

仅允许数字而非小数的函数如下所示

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if ((charCode < 48 || charCode > 57))
        return false;

    return true;
}

HTML

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">

答案 2 :(得分:3)

输入类型=“数字”,用于在移动设备上获取数字键盘

的Java脚本

function numbersonly(myfield, e)
        {
            var key;
            var keychar;

            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;

            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;

            // only one decimal point
            else if ((keychar == "."))
            {
                if (myfield.value.indexOf(keychar) > -1)
                    return false;
            }
            else
                return false;
        }

HTML

<input type="number" onkeypress="return numbersonly(this, event)"/>

答案 3 :(得分:1)

浏览器表现不同。在Chrome中使用以下代码:

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
  <input type="submit">
只有在表单中且仅在用户点击提交按钮后,

才能

答案 4 :(得分:1)

如果您不介意使用一些Javascript,这可能有助于JS-BIN Demo

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>

答案 5 :(得分:1)

您必须将输入框放在表单中并使用提交按钮。表单验证在提交表单时进行。在此处查看演示:http://jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>

答案 6 :(得分:1)

试试这个: -

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });

答案 7 :(得分:1)

我注意到这个问题是在2013年左右发布的。无论如何,现在type =“number”限制字母和特殊字符“e”,“。”和'+'为'e'和'。'被认为是指数数字,如1.2e + 12,'。'被视为十进制数。

答案 8 :(得分:0)

只需添加-min =“ 0” max =“ 9” onkeydown =“返回false;”

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">