HTML文本输入仅允许数字输入

如果您想在alpha或数字之间建议设备(可能是手机),您可以使用.

使用jQuery和replace()而不是查看event.keyCode或event.which的简短而甜蜜的实现:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

键入的字母暂时出现的小副作用和CTRL/CMD + A似乎表现得有点奇怪.

再举一个例子,你可以在输入字段中添加唯一号码,不能信

JavaScript代码:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML代码:

完美的工作,因为退格键代码是8,正则表达式不允许它,所以这是一个绕过错误的简单方法:)

input type="number" 是HTML5属性.

在另一种情况下,这将帮助您:

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

只是使用jQuery的另一个变种

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

现在使用type ="number"这个属性支持大多数浏览器

您还可以将输入值(默认情况下视为字符串)与强制为数字的自身进行比较,如:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

但是,您需要将其绑定到事件,如键盘等.

这是一个改进的功能：

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

使用此DOM：

这个脚本：

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...或者这个脚本，没有indexOf，使用两个for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

我使用onkeydown属性而不是onkeypress，因为onkeydown属性是在onkeypress属性之前检查的。问题可能出在Google Chrome浏览器中。

使用属性“ onkeypress”，在Google chrome上使用“ preventDefault”将无法控制TAB，但是使用属性“ onkeydown”将TAB变为可控制！

TAB的ASCII码=> 9

第一个脚本的代码少于第二个脚本的代码，但是，ASCII字符数组必须具有所有键。

第二个脚本比第一个脚本大得多，但是数组不需要所有键。数组每个位置的第一个数字是每个位置将被读取的次数。对于每个读数，将增加1至下一个读数。例如：




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




如果数字键只有10（0-9）个，但是如果它们是100万个，则用所有这些键创建数组是没有意义的。

ASCII码：

8 ==>（退格）;

46 =>（删除）;

37 =>（向左箭头）;

39 =>（向右箭头）;

48-57 =>（数字）；

36 =>（主页）;

35 =>（结束）;

解决此问题的一种简单方法是实现jQuery函数，以使用正则表达式验证文本框中键入的字符，例如：

您的html代码：

以及使用jQuery的js函数

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});