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

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

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

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

我一个也找不到。


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

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

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

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


当前回答

张贴它,如果将来有人需要它

const negativeValuePrevent = (e) => {
    const charCode = e.which ? e.which : e.keyCode;
    if(charCode > 31 && (charCode < 48 || charCode > 57) 
    && charCode !== 46){
      if(charCode < 96 || charCode > 105){
        e.preventDefault();
        return false;
      }
    }
    return true;
  };

其他回答

从规格来看

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

所以你可以简单地把它设为1:

最短的

这是R. Yaghoobi答案的尺寸改进

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

这里我们使用标准的“或”运算符简写,例如二进制9 | 2 = 11:0b1001 | 0b1010 = 0b1011。该运算符首先以隐式方式将数字转换为整数,然后执行或运算。但因为OR带0不会改变任何东西,所以number被转换为整数。非数字字符串的OR值为0。

模式是很好的,但如果你想限制输入的数字只有type="text",你可以使用oninput和一个正则表达式如下:

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

我为我自己工作:)

将step属性设置为1:

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

这似乎有点bug在Chrome现在,所以它可能不是目前最好的解决方案。

一个更好的解决方案是使用pattern属性,它使用正则表达式来匹配输入:

<输入类型=“文本”模式=“\d*”/>

\d是数字的正则表达式,*表示它接受多个数字。

使用JavaScript的简单方法:

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