如何在輸入上使用模式[type =「number」]？

我希望默認值爲0，如果輸入大於0，則使用:valid將輸入重新着色。難道我做錯了什麼？ Google Chrome是否錯誤？或者HTML5規範？我想解決這個沒有JS。如何在輸入上使用模式[type =「number」]？

:valid { 
 
    background: green 
 
}

<p>This should not be green, but it is:</p> 
 
<input max="100" min="0" pattern="^[1-9]\d*$" type="number" value="0" /> 
 

 
<p>Works perfectly, if the type is changed to text:</p> 
 
<input pattern="^[1-9]\d*$" type="text" value="0" />

來源

2015-10-29 Tamás Bolvári

Citing MDN on the pattern property（高亮加入）：

圖案

的正則表達式，所述控制的值與檢查。該模式必須匹配整個值，而不僅僅是一些子集。使用標題屬性來描述幫助用戶的模式。 這個屬性適用於當type屬性的值爲文本時， search，tel，url或email;否則會被忽略。正則表達式語言與JavaScript的相同。圖案不是，它由正斜槓包圍。

有趣的是，在W3C和WhatWG標準中我都找不到任何提及。

來源

2015-10-29 10:35:10 Sirko

我也沒有，所以我沒有看到數字輸入的理由不可能通過這種方式進行驗證。我也希望能夠出於其他原因使用模式，比如檢查數字是奇數還是偶數等。由於瀏覽器不像規範中建議的那樣工作，我會提交錯誤報告。 –

我看到，如果您給出的最小值爲1，顏色不爲0，綠色。當您輸入1時顏色變爲綠色。我認爲這就是您所期待的，對嗎？

基本上，您可以使用最小值和最大值進行驗證。我不認爲你需要這種模式。

<input max="100" min="1" type="number" value="0" />

這裏有一個限制。如果您將該字段留空，它仍然是綠色的！

來源

2015-10-29 11:38:33

如何在輸入上使用模式[type =「number」]？

回答

相關問題