<input type="number">
型別為 number 的 <input> 元素用於讓使用者輸入一個數字。它們包含內建驗證以拒絕非數字輸入。
瀏覽器可以選擇提供步進器箭頭，讓使用者使用滑鼠或輕觸指尖來增加和減少值。
試一試
<label for="tentacles">Number of tentacles (10-100):</label>
<input type="number" id="tentacles" name="tentacles" min="10" max="100" />
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
在不支援 number 型別輸入的瀏覽器上，number 輸入會回退到 text 型別。
值
一個數字，表示輸入框中輸入的數字值。你可以透過在 value 屬性中包含一個數字來設定輸入的預設值，如下所示
<input id="number" type="number" value="42" />
附加屬性
除了所有 <input> 型別通常支援的屬性之外，number 型別的輸入還支援這些屬性。
list
列表屬性的值是位於同一文件中的 <datalist> 元素的 id。<datalist> 為此輸入提供了一個預定義值列表，以供使用者建議。列表中與 type 不相容的任何值都不會包含在建議選項中。提供的值是建議，而不是要求：使用者可以從這個預定義列表中選擇，也可以提供不同的值。
max
此輸入允許的最大值。如果輸入到元素中的值超過此值，則元素會約束驗證失敗。如果 max 屬性的值不是數字，則該元素沒有最大值。
此值必須大於或等於 min 屬性的值。
min
此輸入接受的最小值。如果元素值小於此值，則元素將約束驗證失敗。如果為 min 指定的值不是有效的數字，則輸入沒有最小值。
此值必須小於或等於 max 屬性的值。
placeholder
placeholder 屬性是一個字串，它向用戶提供一個簡短的提示，說明欄位中預期哪種資訊。它應該是一個詞或短語，演示預期的資料型別，而不是解釋性訊息。文字不能包含回車或換行符。
如果控制元件的內容具有單一方向性（從左到右或從右到左），但需要以相反的方向性呈現佔位符，您可以使用 Unicode 雙向演算法格式字元來覆蓋佔位符內的方向性；有關更多資訊，請參閱如何使用 Unicode 控制元件處理雙向文字。
注意： 如果可以，請避免使用 placeholder 屬性。它不如其他解釋表單的方式在語義上有用，並且可能導致您的內容出現意外的技術問題。有關更多資訊，請參閱<input> 標籤。
readonly
一個布林屬性，如果存在，則表示該欄位不能由使用者編輯。但是，其 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement value 屬性來更改。
注意： 由於只讀欄位不能有值，因此 required 對同時指定了 readonly 屬性的輸入沒有影響。
step
step 屬性是一個數字，指定了值必須遵循的粒度，或者特殊值 any，下文將對此進行描述。只有從步長基數計算的整數步長值才有效。如果指定了 min，則步長基數為 min；否則為 value；如果兩者均未提供，則為 0。
number 輸入的預設步進值為 1，只允許輸入整數——除非步進基數不是整數。
字串值 any 意味著不暗示任何步進，並且允許任何值（排除其他約束，例如 min 和 max）。
注意：當用戶輸入的資料不符合步進配置時，使用者代理可能會四捨五入到最近的有效值，當有兩個同樣接近的選項時，優先選擇正方向的數字。
使用數字輸入
number 輸入型別僅應用於增量數字，尤其是在旋轉按鈕遞增和遞減有助於使用者體驗時。number 輸入型別不適用於碰巧只包含數字但嚴格來說不是數字的值，例如許多國家的郵政編碼或信用卡號。對於非數字輸入，請考慮使用不同的輸入型別，例如 <input type="tel"> 或其他帶有 inputmode 屬性的 <input> 型別
<input type="text" inputmode="numeric" pattern="\d*" />
<input type="number"> 元素可以在構建用於在表單中輸入數字的使用者介面和邏輯時簡化您的工作。當您使用正確的 type 值 number 建立數字輸入時，您將獲得對輸入文字是數字的自動驗證，並且通常會有一組向上和向下按鈕來增加和減少值。
警告： 從邏輯上講，您不應該在數字輸入中輸入除數字以外的字元。一些瀏覽器允許無效字元，另一些則不允許；請參閱 Firefox 錯誤 1398528。
注意： 使用者可以在後臺修改您的 HTML，因此您的網站絕不能出於安全目的使用客戶端驗證。對於提供的值可能具有任何安全隱患的任何事務，您必須在伺服器端進行驗證。
移動瀏覽器透過在使用者嘗試輸入值時顯示一個更適合輸入數字的特殊鍵盤來進一步幫助使用者體驗。
一個基本的數字輸入
以最基本的形式，數字輸入可以這樣實現
<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />
當數字輸入為空且輸入單個數字時，它被認為是有效的，否則無效。如果使用 required 屬性，則當輸入為空時，它不再被認為是有效的。
佔位符
有時，提供一個上下文提示，說明輸入資料應採用何種形式，這會很有幫助。如果頁面設計不為每個 <input> 提供描述性標籤，這尤其重要。這就是佔位符的作用。佔位符是一個值，最常用於提供一個提示，說明輸入應採用 value 的格式。當元素的 value 為 "" 時，它會顯示在編輯框中。一旦資料輸入到框中，佔位符就會消失；如果框被清空，佔位符會重新出現。
在這裡，我們有一個帶有佔位符“Multiple of 10”的 number 輸入框。請注意，當您操作編輯欄位的內容時，佔位符如何消失和重新出現。
<input type="number" placeholder="Multiple of 10" />
控制步長
預設情況下，提供給您用於上下步進數字的上下按鈕將以 1 為步長增加和減少值。您可以透過提供 step 屬性來更改此設定，該屬性的值是一個指定步長量的數字。我們上面的示例包含一個佔位符，說明該值應為 10 的倍數，因此新增一個 10 的 step 值是很有意義的。
<input type="number" placeholder="multiple of 10" step="10" />
在這個例子中，您會發現上下步進箭頭每次會增加和減少值 10，而不是 1。您仍然可以手動輸入一個不是 10 的倍數的數字，但它將被視為無效。
指定最小值和最大值
您可以使用 min 和 max 屬性來指定欄位可以具有的最小值和最大值。例如，讓我們將示例的最小值為 0，最大值為 100
<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
在這個更新的版本中，您會發現上下步進按鈕不允許您輸入低於 0 或高於 100 的值。您仍然可以手動輸入超出這些範圍的數字，但它將被視為無效。
允許小數位
數字輸入的一個問題是它們預設步長為 1。如果您嘗試輸入一個非整數的十進位制數（例如“1.1”），它將被視為無效。請注意，“1.0”之類的值被視為有效，因為它們在數值上等同於整數。如果您想輸入帶有小數的值，則需要透過 step 值來反映這一點（例如，step="0.01" 允許兩位小數）。下面是一個基本示例
<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
請看這個示例，它允許 0.0 和 10.0 之間的任何值，小數位數為兩位。例如，“9.52”是有效的，但“9.521”是無效的。
如果您想允許任意小數位值，可以將 step 值設定為 "any"。
控制輸入大小
<input> 元素型別 number 不支援表單大小屬性，例如 size。您必須依靠 CSS 來更改這些控制元件的大小。
例如，為了將輸入寬度調整到只需要輸入三位數字的寬度，我們可以修改 HTML，使其包含一個 id，並縮短佔位符，因為欄位對於我們目前使用的文字來說太窄了
<input
type="number"
placeholder="x10"
step="10"
min="0"
max="100"
id="number" />
然後我們新增一些 CSS 來縮小 ID 選擇器 #number 元素的寬度
#number {
width: 3em;
}
結果如下所示
提供建議值
您可以透過指定 list 屬性來提供使用者可以選擇的預設選項列表，該屬性的值是 id 屬性的一個 <datalist> 元素，而該元素又包含每個建議值的一個 <option> 元素。每個 option 的 value 是數字輸入框的相應建議值。
<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>
<datalist id="defaultNumbers">
<option value="10045678"></option>
<option value="103421"></option>
<option value="11111111"></option>
<option value="12345678"></option>
<option value="12999922"></option>
</datalist>
驗證
我們已經提到了 number 輸入的許多驗證功能，現在讓我們回顧一下它們
<input type="number">元素會自動使任何非數字輸入（或空，除非指定了required）失效。- 您可以使用
required屬性使空輸入無效。（換句話說，輸入必須填寫。） - 您可以使用
step屬性將有效值限制在某個步進集合內（例如，10 的倍數）。 - 您可以使用
min和max屬性將有效值限制在下限和上限。
以下示例展示了上述所有功能，以及使用一些 CSS 根據 input 的值顯示有效和無效圖示
<form>
<div>
<label for="balloons">Number of balloons to order (multiples of 10):</label>
<input
id="balloons"
type="number"
name="balloons"
step="10"
min="0"
max="100"
required />
<span class="validity"></span>
</div>
<div>
<input type="submit" />
</div>
</form>
嘗試提交表單時輸入不同的無效值——例如，沒有值；小於 0 或大於 100 的值；不是 10 的倍數的值；或非數值——看看瀏覽器給出的錯誤訊息如何不同。
此示例應用的 CSS 如下
div {
margin-bottom: 10px;
}
input:invalid + span::after {
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
content: "✓";
padding-left: 5px;
}
在這裡，我們使用 :invalid 和 :valid 偽類來在相鄰的 <span> 元素上顯示一個合適的無效或有效圖示作為生成內容，作為有效性的視覺指示。
我們將其放在一個單獨的 <span> 元素上，以增加靈活性。某些瀏覽器在某些型別的表單輸入上無法非常有效地顯示生成的內容。（例如，閱讀關於 <input type="date"> 驗證的部分。）
警告： HTML 表單驗證不能替代伺服器端指令碼來確保輸入資料格式正確！
任何人都可以很容易地修改 HTML，從而繞過驗證，或者完全刪除它。使用者也可以繞過 HTML，直接向您的伺服器提交資料。
如果您的伺服器端程式碼未能驗證接收到的資料，那麼當提交格式不正確的資料（或資料過大、型別錯誤等）時，可能會發生災難。
模式驗證
<input type="number"> 元素不支援使用 pattern 屬性來使輸入值符合特定的正則表示式模式。
這樣做的理由是，數字輸入如果包含除數字以外的任何內容，則無效，並且可以使用 min 和 max 屬性來限制有效數字的最小和最大數量（如上所述）。
無障礙
<input type="number"> 元素的隱式 角色 是 spinbutton。如果旋轉按鈕對於您的表單控制元件來說不是一個重要的功能，請考慮不使用 type="number"。而是使用 inputmode="numeric" 以及一個將字元限制為數字和相關字元的 pattern 屬性。使用 <input type="number">，使用者可能會在嘗試做其他事情時意外增加數字。此外，如果使用者嘗試輸入非數字內容，也沒有明確的反饋說明他們做錯了什麼。
此外，還應考慮使用 autocomplete 屬性來幫助使用者更快地填寫表單，並減少出錯的機會。例如，要在郵政編碼欄位上啟用自動填充，請設定 autocomplete="postal-code"。
示例
我們已經介紹了預設情況下增量為 1 的事實，並且您可以使用 step 屬性來允許十進位制輸入。讓我們仔細看看。
以下示例是一個用於輸入使用者身高的表單。它預設接受以米為單位的身高，但您可以單擊相關按鈕將表單更改為接受英尺和英寸。以米為單位的身高輸入接受兩位小數。
HTML 如下所示
<form>
<div class="metersInputGroup">
<label for="meters">Enter your height — meters:</label>
<input
id="meters"
type="number"
name="meters"
step="0.01"
min="0"
placeholder="e.g. 1.78"
required />
<span class="validity"></span>
</div>
<div class="feetInputGroup">
<span>Enter your height — </span>
<label for="feet">feet:</label>
<input id="feet" type="number" name="feet" min="0" step="1" />
<span class="validity"></span>
<label for="inches">inches:</label>
<input id="inches" type="number" name="inches" min="0" max="11" step="1" />
<span class="validity"></span>
</div>
<div>
<input
type="button"
class="meters"
value="Enter height in feet and inches" />
</div>
<div>
<input type="submit" value="Submit form" />
</div>
</form>
您會看到我們正在使用本文前面已經討論過的許多屬性。由於我們希望接受以釐米為單位的米值，我們將 step 值設定為 0.01，這樣像 1.78 這樣的值就不會被視為無效。我們還為該輸入提供了一個佔位符。
我們最初使用 style="display: none;" 隱藏了英尺和英寸的輸入，這樣米就是預設的輸入型別。
現在，關於 CSS。這看起來與我們之前看到的驗證樣式非常相似；這裡沒有什麼值得注意的。
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
最後是 JavaScript
const metersInputGroup = document.querySelector(".metersInputGroup");
const feetInputGroup = document.querySelector(".feetInputGroup");
const metersInput = document.querySelector("#meters");
const feetInput = document.querySelector("#feet");
const inchesInput = document.querySelector("#inches");
const switchBtn = document.querySelector('input[type="button"]');
feetInputGroup.style.display = "none"; // Hide feet/inches inputs initially
switchBtn.addEventListener("click", () => {
if (switchBtn.getAttribute("class") === "meters") {
switchBtn.setAttribute("class", "feet");
switchBtn.value = "Enter height in meters";
metersInputGroup.style.display = "none";
feetInputGroup.style.display = "block";
feetInput.setAttribute("required", "");
inchesInput.setAttribute("required", "");
metersInput.removeAttribute("required");
metersInput.value = "";
} else {
switchBtn.setAttribute("class", "meters");
switchBtn.value = "Enter height in feet and inches";
metersInputGroup.style.display = "block";
feetInputGroup.style.display = "none";
feetInput.removeAttribute("required");
inchesInput.removeAttribute("required");
metersInput.setAttribute("required", "");
feetInput.value = "";
inchesInput.value = "";
}
});
在宣告幾個變數後，將事件偵聽器新增到 button 以控制切換機制。這涉及在按下按鈕時更改按鈕的 class 和 <label>，並更新兩組輸入的顯示值。
（請注意，我們這裡沒有在米和英尺/英寸之間進行來回轉換，而真實的 Web 應用程式可能會這樣做。）
注意：當用戶單擊按鈕時，我們將從隱藏的輸入中移除 required 屬性，並清空 value 屬性。這樣做的目的是為了在兩組輸入都未填寫時也能提交表單。它還確保表單不會提交使用者不想提交的資料。
如果您不這樣做，您將不得不填寫英尺/英寸和米才能提交表單！
技術摘要
| 值 | 一個表示數字的 Number，或者為空 |
| 事件 |
change 和 input |
| 支援的常見屬性 |
autocomplete, list, placeholder, readonly |
| IDL 屬性 |
list, value, valueAsNumber |
| DOM 介面 | HTMLInputElement |
| 方法 |
select(), stepUp(), stepDown() |
| 隱式 ARIA 角色 |
spinbutton
|
規範
| 規範 |
|---|
| HTML # 數字狀態-(type=number) |
瀏覽器相容性
載入中…