小攻城師的戰場筆記

今天有 user 反映，在某個表單頁面，輸入資料後會出現以下訊息，每個瀏覽器反應都不同：

• IE:「您必須輸入有效的值」
• Firefox: 「請選擇有效的值。最接近的有效值為 1 與 2。」
• Chrome: 「請輸入有效值。最接近的兩個有效值分別是 1 和 2。」

雖然我們有使用 jQuery 或 Bootstrap，但是如果是使用這些 JavaScript Library 的驗證工具 (validation)，應該不至於出現不同訊息才對。

後來發現是因為表單元件設定為 <input type="number">，預設會以整數的方式檢測表單內容，而使用者在該欄位輸入的值為四位小數。（沒有設定 require 屬性，所以不會被當成必填欄位）

調整的方式為加入 "step" 屬性，以我們需要允許使用者輸入四位小數為例，需要改成：

<input type="number" type="0.0001">

改完就能讓使用者輸入到小數四位了。如果是要讓使用者輸入各種格式的數字，則可以把 step 的值設定為 any：

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