Question

<input type="number" name="quantity2" value="1.1" >

我有一个CSS，用无效数据（数字）为输入着色。

但它用小数点或小数点逗号输入颜色

点击此处：

http://jsfiddle.net/pjvkh0zc/1/

尝试键入1.1或1,1 - 在我的铬合金上，它们都是红色的

Answer 1

您需要添加step属性

＆＃13;

  input:invalid {
    border: 2px solid red;
  }

＆＃13;

<input type="number" name="quantity1" pattern="[-+]?[0-9]*[.,]?[0-9]+" step="any">

<input type="number" name="quantity1" pattern="[-+]?[0-9]*[.,]?[0-9]+" step="0.1">

＆＃13;

数字输入字段可以采用其他属性“min”和“step”，这会限制输入中允许的值范围。 “min”属性非常明显：它是您的号码的最小值。 “step”属性不太直观：通过使用不同的值，您很可能会在单击字段上的向上/向下按钮时控制增加/减少。如果您输入数字1并单击向上箭头，它将增加到2.这是因为默认步骤为1.到目前为止，这是显而易见的。但是，step属性还确定哪些值有效，因此步长为1表示您可以输入1,2,3等等，而步长为2表示您可以输入2,4,6等，当您单击向上时/向下按钮数字每次增加/减少2，但在框中输入3或5将导致验证错误。您还可以使用小数值：例如，0.3的步长将允许诸如0.3,0.6,0.9等值，但不允许1或2。

但是，如果您希望所有数字都有效，整数和小数相同怎么办？在这种情况下，将步骤设置为“any”：

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

现在您没有收到验证错误。好极了！另请注意，如果您只想接受正数，则需要添加min =“0”。

在此Article

中找到

Answer 2

input type="number"采用另一个属性step，该属性控制哪些值有效，以及输入字段旁边的+/-按钮是什么。默认为1.例如，将其更改为0.1将允许使用0.1,0.2等数字

在input type =“number”中为任何类型的小数分隔符获取无效样式

2 个答案: