在輸入類型=「數字」中獲取任何類型的小數點分隔符的無效樣式

Question

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

我有一個CSS，它使用無效數據（數字）輸入顏色。

但它與小數點或小數逗號

檢查這裏的顏色兩種輸入：

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

嘗試鍵入1.1或1,1 - 在我的鉻他們都是紅色的

Answer 1

input type="number"進一步的屬性，step，它控制什麼值是有效的，以及輸入字段旁邊的+/-按鈕做什麼。它默認爲1，將其更改爲0.1，例如，將允許號碼，如0.1，0.2，等

Answer 2

您需要添加一個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等，並且當您單擊up /向下按鈕，數字每次增加/減少2，但在框中輸入3或5會導致驗證錯誤。您也可以使用十進制值：例如，0.3的步長將允許0.3,0.6,0.9等值，但不是1或2.

但是，如果希望所有數字都是有效的，整數和小數點一樣嗎？在這種情況下，設定步驟「的任何」：

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

現在你沒有得到驗證錯誤。好極了！另請注意，如果您只想接受正數，則需要添加min =「0」。

發現在這個Article