简短而用户友好

Question

我正在使用jQuery Tools Validator，它通过jQuery实现HTML5验证。到目前为止它一直很好用，除了一件事。在HTML5规范中，输入类型“number”可以包含整数和浮点数。这看起来非常短视，因为当数据库字段是带符号的浮点数时，它只是一个有用的验证器（对于无符号整数，你必须回退到“模式”验证，因此松散的额外功能，如向上和向下箭头对于支持它的浏览器）。是否有另一种输入类型或可能将输入限制为无符号整数的属性？我找不到任何，谢谢。

修改

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

Answer 1

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

只有HTML才能实现的最佳效果

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

Answer 2

将step属性设置为1：

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

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

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

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

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

Answer 3

使用JavaScript的简便方法：

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

Answer 4

<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

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

Patter attribute doc

Answer 5

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

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

我向我致意：）

Answer 6

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

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

Answer 7

<input type="number" oninput="this.value = Math.round(this.value);"/>

Answer 8

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

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

Answer 9

 <input type="number" min="0" step="1" pattern="\d+"/>

Answer 10

您是否已尝试将step属性设置为1

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

Answer 11

是的，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（无效）。

Answer 12

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

Answer 13

我正在工作哦Chrome并且遇到了一些问题，即使我使用了html属性。我最终得到了这个js代码

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

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

        return true;
});

Answer 14

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

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

可以做得很好：fiddle。

检查documentation。

Answer 15

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

Answer 16

From the specs

step="any"或正浮点数
指定元素值的值粒度。

因此，您只需将其设置为1：

即可

Answer 17

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

Answer 18

function get_planet_house( $houses, $in_long )
{
    asort( $houses );
    foreach ( array_keys( $houses ) as $key )
    {
        if ( $in_long < $houses [$key]["longitude"] )
        {
            return $key - 1;
        }
    }
    return $key;
}

Answer 19

当前，无法阻止用户仅使用HTML在输入中写入十进制值。您必须使用javascript。

Answer 20

简短而用户友好

此解决方案支持按Tab键，退格键，回车键，减号键

<input type=text oninput="this.value= ['','-'].includes(this.value) ? this.value : this.value|0">

但是不允许将已经键入的数字更改为减号，并且不能处理复制粘贴的情况。

作为替代方案，您可以使用基于R. Yaghoobi answer的解决方案，该解决方案允许放置负号并处理复制粘贴的情况，但是当用户键入禁止字符时会删除整数

def pdf_btnClicked():
    global PDFFILE
    PathOfPDF = askopenfile()
    PDFFILE = PathOfPDF.name
    print(PDFFILE)
    
book = open(PDFFILE, 'rb')

Answer 21

最短

这是R. Yaghoobi answer

的尺寸改进

<input type="number" oninput="this.value|=0"/>

此处我们使用“ OR”运算符的标准简写形式，例如9 | 2 = 11的二进制形式：0b1001 | 0b1010 = 0b1011。该运算符首先以隐式方式将数字转换为整数，然后执行“或”运算。但是因为OR为零不会改变任何内容，所以数字会强制转换为整数。或非数字字符串为0。

Answer 22

整数输入将意味着它也只能接受正数，0和负数。这就是我能够使用Javascript按键实现此目的的方法。

<input type="number" (keypress)="keypress($event, $event.target.value)" >

keypress(evt, value){
  
    if (evt.charCode >= 48 && evt.charCode <= 57 || (value=="" && evt.charCode == 45))       
    {  
      return true;
    }
    return false;
}

给定的代码不允许用户在运行时输入字母或小数，只能输入正整数和负整数。

Answer 23

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

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

23 个答案:

简短而用户友好

最短