首页 文章

HTML5：数字输入类型只采用整数？

提问于
浏览 次
198

我正在使用jQuery Tools Validator，它通过jQuery实现HTML5验证 . 它必须回退到"pattern"验证，因此松散了额外的功能，例如支持它的浏览器的向上和向下箭头 . 是否有另一个输入类型或可能将输入限制为无符号整数的属性？我找不到任何，谢谢 .

EDIT

好的，我感谢您的时间和帮助，但我看到许多不值得的投票：D . 将步骤设置为1不是答案，因为它不限制输入 . 您仍然可以在文本框中键入负浮点数 . 另外，我知道模式验证（我在原帖中提到过），但这不是问题的一部分 . 我想知道HTML5是否允许将“number”类型的输入限制为正整数值 . 对于这个问题，似乎答案是“不，不是” . 我不想使用模式验证，因为这在使用jQuery Tools验证时会产生一些缺点，但现在似乎规范不允许更简洁的方法来执行此操作 .

jquery html5 validation jquery-tools

20 回答

  • -1

    这不仅适用于html5，所有浏览器都能正常工作 . 试试这个

    onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
    回复于
  • 3

    模式很好但是如果你想仅使用type =“text”将输入限制为数字，你可以使用oninput和一个正则表达式，如下所示：

    <input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

    我跟我说话:)

    回复于
  • 6

    模式始终优于限制，尝试 oninput 和 min 出现1仅用于输入从1开始的数字

    <input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
    回复于
  • 5

    你试过像这样将 step 属性设置为1吗？

    <input type="number" step="1" />
    回复于
  • 29

    将 step 属性设置为 1 ：

    <input type="number" step="1" />

    这在Chrome中似乎有点儿错误，所以它可能不是目前最好的解决方案 .

    更好的解决方案是使用 pattern 属性，该属性使用正则表达式来匹配输入：

    <input type="text" pattern="\d*" />

    \d 是数字的正则表达式， * 表示它接受多个数字 . 这是演示：http://jsfiddle.net/b8NrE/1/

    回复于
  • 0

    使用JavaScript的简单方法：

    <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
    回复于
  • 21
    <input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

    使用此代码，文本字段的输入限制为仅输入数字....模式是HTML5中可用的新属性

    Patter attribute doc

    回复于
  • 13

    https://www.w3.org/wiki/HTML/Elements/input/number

    只有HTML才能达到最佳效果

    <input type="number" min="0" step="1"/>
    回复于
  • 3

    是的，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>

    查看最小和最大参数？我尝试使用Chrome 19（有效）和Firefox 12（无效） .

    回复于
  • 2

    虽然我使用html属性，但我正在使用Chrome并遇到一些问题 . 我最终得到了这个js代码

    $("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
    回复于
  • 2
    回复于
  • 2
    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);
    }
});
    回复于
  • 263

    只需将其放在输入字段中： onkeypress='return event.charCode >= 48 && event.charCode <= 57'

    回复于
  • 0

    From the specs

    step =“any”或正浮点数指定元素值的值粒度 .

    所以你可以简单地将它设置为 1 ：

    回复于
  • 2

    将 step 属性设置为任何浮点数，例如0.01，你很高兴 .

    回复于
  • 2

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

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

    可以做得很好：fiddle .

    检查documentation .

    回复于
  • -2
    <input type="number" min="0" step="1" pattern="\d+"/>
    回复于
  • 12

    目前，无法阻止用户仅使用HTML在输入中写入十进制值 . 你必须使用JavaScript .

    回复于
  • 4

    顺便说一句，似乎如果你在“数字”输入中有一个数字而不是数字，val（）等返回'' . 我只是检查一下，它似乎适用于我需要的东西（限制字母和其他字符） .

    if( var == '' ) {
    alert( 'Var is not a number' );
}

    使用前导零，小数点等 .

    回复于
  • 144

    在Future™（请参阅Can I Use）中，对于向您显示键盘的用户代理，您可以使用 input[inputmode] 将文本输入限制为仅数字 .

    回复于

相关问题