21

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

不足以这样做的代码是：

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

任何帮助表示赞赏。

4

9 回答 9

23

您可以使用 jquery.numeric插件。

请参阅 此处类似的问题。

$(document).ready(function(){
   $(".numeric").numeric();
});
于 2013-08-14T06:00:34.353 回答
16

尝试这个

定义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)">
于 2013-08-14T06:32:27.637 回答
3

input type="number" 用于在移动设备上获取数字键盘

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)"/>
于 2015-05-12T15:21:45.330 回答
1

浏览器的行为不同。在 Chrome 中，以下代码：

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

只有在表单中并且仅在用户单击提交按钮后才对您有用。

于 2013-08-14T06:01:25.173 回答
1

如果您不介意使用一点 Javascript，这可能对JS-BIN Demo有所帮助：

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>
于 2013-08-14T06:19:54.333 回答
1

您必须将输入框放在表单内并带有提交按钮。表单验证发生在提交表单时。在此处查看演示：http: //jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>
于 2013-08-14T06:49:50.417 回答
1

尝试这个：-

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });
于 2017-01-25T09:14:24.697 回答
1

我注意到这个问题是在 2013 年左右发布的。无论如何，现在 type="number" 正在限制字母和除 'e','.' 之外的特殊字符。和 '+' 作为 'e' 和 '.' 考虑指数数字，例如 1.2e+12, '.' 被认为是十进制数。

于 2017-02-14T08:27:44.973 回答
0

只需添加 - min="0" max="9" onkeydown="return false;"

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

于 2018-12-16T06:17:29.997 回答