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

有一个快速的方法来设置HTML文本输入(<input type=text />)，只允许数字击键(加上'.')?

当前回答

使用这个DOM:

<input type = "text" onkeydown = "validate(event)"/>

还有这个脚本:

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属性之前检查的。问题出在谷歌Chrome浏览器上。

与属性“onkeypress”，标签将不可控与“preventDefault”谷歌chrome，然而，与属性“onkeydown”，标签变成可控!

9 . TAB =>的ASCII码

第一个脚本的代码比第二个脚本少，但是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 => (home); 35 => (end);

2013-03-03 06:11:17

其他回答

//在JavaScript函数中(可以使用HTML或PHP)。

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

在您的表单输入:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

输入max。(以上这些允许使用12位数字)

2012-12-12 04:47:28

这是一个简单的解决方案

取代。price-input输入。数量与输入字段的类

$(".price-input input.quantity").on("keypress keyup blur",function (event) {    
       $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });

2018-03-22 07:18:44

HTML5支持正则表达式，所以你可以使用这个:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

警告:某些浏览器还不支持此功能。

2011-09-02 12:52:52

我对它做了一些调整，但它需要做更多的工作来符合JavaScript的奇怪方式。

function validateNumber(myEvent,decimal) {
    var e = myEvent || window.event;
    var key = e.keyCode || e.which;

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

然后它被称为via:

$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});

2012-09-03 15:45:33

是的，HTML5可以。试试下面的代码(w3school):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

2014-08-26 09:09:52

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

推荐文章

最新文章

标签