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

Question

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

我有一个CSS,用无效数据(数字)输入颜色.

但它用小数点或十进制逗号为两个输入着色

点击这里:

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

尝试输入1.1或1,1 - 在我的chrome上它们都是红色的

Answer 1

您需要添加step属性

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

<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">

数字输入字段可以采用其他属性"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".

发现在这条