我正在使用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);
}
});