我正在使用jQuery工具验证器,它通过jQuery实现HTML5验证。

到目前为止一切都很顺利,除了一件事。在HTML5规范中,输入类型“number”既可以是整数也可以是浮点数。

这似乎是非常短视的,因为它只在数据库字段是带符号的浮点数时才有用(对于无符号整数,您将不得不退回到模式验证,从而失去支持它的浏览器的上下箭头等额外功能)。

是否有另一种输入类型或属性将输入限制为无符号整数?

我一个也找不到。


将步长设置为1并不是答案,因为它不限制输入。您仍然可以在文本框中键入一个负浮点数。

此外,我知道模式验证(我在最初的文章中提到过),但这不是问题的一部分。

我想知道HTML5是否允许将“数字”类型的输入限制为正整数值。对于这个问题,答案似乎是“不,没有关系”。

我不想使用模式验证,因为这会在使用jQuery工具验证时造成一些缺陷,但现在看来,规范不允许使用更清晰的方式来实现这一点。


当前回答

var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});

其他回答

设置步骤="any"。工作很好。 参考:http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

也许它不适合每一个用例,但是

<input type="range" min="0" max="10" />

能做一件很好的工作:小提琴。

检查文档。

这不仅适用于HTML5。这在所有浏览器中都可以正常工作。试试这个:

. getelementbyid(“输入”)。addEventListener("keyup", function() { 这一点。Value = this.value。替换(/ [^ 0 - 9]/ g, " "); }); <input id="input" type="text">

仅使用HTML(文档)可以达到的最好效果是:

<输入类型=“数字” 最小=“0” 步数=“1”/>

将step属性设置为任何浮点数,例如0.01,就可以了。