<input type="number">

型別為 number 的 <input> 元素用於讓使用者輸入數字。它們包括內建驗證以拒絕非數字條目。

瀏覽器可以選擇提供步進箭頭，讓使用者使用滑鼠或手指輕觸來增加和減少值。

試一試

在不支援型別為 number 的輸入的瀏覽器上，number 輸入會回退到型別為 text 的輸入。

價值

表示輸入到輸入框中的數字值的數字。您可以透過在 value 屬性中包含一個數字來設定輸入的預設值，如下所示

html

<input id="number" type="number" value="42" />

附加屬性

除了所有<input>型別通用的屬性外，型別為number的輸入還支援以下屬性。

`列表`

list屬性的值是同一文件中<datalist>元素的id。<datalist>提供一個預定義值的列表，供使用者選擇此輸入的建議值。列表中與type不相容的任何值都不會包含在建議選項中。提供的值只是建議，不是強制要求：使用者可以選擇此預定義列表中的值，也可以提供其他值。

`max`

此輸入可接受的最大值。如果元素中輸入的value超過此值，則元素將無法透過約束驗證。如果max屬性的值不是數字，則元素沒有最大值。

此值必須大於或等於min屬性的值。

`min`

此輸入可接受的最小值。如果元素的value小於此值，則元素將無法透過約束驗證。如果為min指定的值不是有效的數字，則輸入沒有最小值。

此值必須小於或等於max屬性的值。

`placeholder`

placeholder屬性是一個字串，它為使用者提供有關該欄位中預期輸入資訊的簡短提示。它應該是一個單詞或短語，來演示預期的資料型別，而不是解釋性資訊。文字中不能包含回車符或換行符。

如果控制元件的內容具有單向性（LTR或RTL），但需要以相反的方向顯示佔位符，則可以使用Unicode雙向演算法格式化字元來覆蓋佔位符內的方向性；有關更多資訊，請參閱如何使用Unicode控制符進行雙向文字。

注意：如果可以，請避免使用placeholder屬性。它在語義上不如其他解釋表單的方法有用，並且可能會導致內容出現意外的技術問題。有關更多資訊，請參閱<input>標籤。

`readonly`

一個布林屬性，如果存在，則表示此欄位不能由使用者編輯。但是，其value仍然可以透過JavaScript程式碼直接設定HTMLInputElement value屬性來更改。

注意：由於只讀欄位不能具有值，因此required對同時指定了readonly屬性的輸入沒有任何影響。

`step`

step屬性是一個數字，它指定了值必須遵守的粒度，或者特殊值any，它將在下面描述。只有等於步進基礎的值（如果指定了min，則為value，如果沒有指定，則為適當的預設值）才是有效的。

any的字串值表示沒有隱式步進，任何值都是允許的（除了其他約束，例如min和max）。

注意：當用戶輸入的資料不符合步進配置時，使用者代理可能會舍入到最近的有效值，在有兩個同樣接近的選項時，優先選擇正方向的數字。

number輸入的預設步進值為1，只允許輸入整數，除非步進基礎不是整數。

使用數字輸入

number輸入型別應該只用於增量數字，特別是當旋轉按鈕的增加和減少對使用者體驗有幫助時。number輸入型別不適用於恰好只包含數字但嚴格來說不是數字的值，例如許多國家/地區的郵政編碼或信用卡號。對於非數字輸入，請考慮使用其他輸入型別，例如<input type="tel">或其他<input>型別，以及inputmode屬性。

html

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number">元素可以幫助簡化構建表單中數字輸入的使用者介面和邏輯的工作。當您使用正確的type值number建立一個數字輸入時，您將獲得自動驗證，確保輸入的文字是數字，並且通常會獲得一組向上和向下按鈕，用於向上和向下步進值。

警告：從邏輯上講，您不應該在數字輸入中輸入除數字以外的字元。一些瀏覽器允許輸入無效字元，另一些則不允許；請參閱Firefox 錯誤 1398528。

注意：使用者可以在幕後篡改您的HTML，因此您的網站不能使用簡單的客戶端驗證來實現任何安全目的。您必須在伺服器端驗證任何交易，其中提供的價值可能具有任何形式的安全影響。

移動瀏覽器在使用者嘗試輸入值時，透過顯示更適合輸入數字的特殊鍵盤，進一步幫助改善使用者體驗。

一個簡單的數字輸入

在最基本的形式中，數字輸入可以像這樣實現：

html

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

當數字輸入為空或只輸入一個數字時，它被認為是有效的，但在其他情況下，它被認為是無效的。如果使用了required屬性，則輸入在為空時不再被認為是有效的。

注意：任何數字都是可接受的值，只要它是一個有效的浮點數（也就是說，不是NaN或Infinity）。

佔位符

有時，提供一個上下文提示以說明輸入資料的格式是有幫助的。如果頁面設計沒有為每個<input>提供描述性標籤，這尤其重要。這就是佔位符的用武之地。佔位符是一個值，最常用於提供有關輸入應該採用什麼格式的提示value。當元素的value為""時，它將在編輯框中顯示。一旦在框中輸入了資料，佔位符就會消失；如果框為空，佔位符就會重新出現。

這裡，我們有一個number輸入，其佔位符為“10的倍數”。請注意，當您操作編輯欄位的內容時，佔位符是如何消失和重新出現的。

html

<input type="number" placeholder="Multiple of 10" />

控制步進大小

預設情況下，為您提供的用於向上和向下步進數字的向上和向下按鈕將使值向上和向下步進 1。您可以透過提供一個step屬性來更改此設定，該屬性的值是一個數字，用於指定步進量。我們上面的示例中有一個佔位符，說明值應該是 10 的倍數，因此新增一個step值為10是有意義的

html

<input type="number" placeholder="multiple of 10" step="10" />

在此示例中，您應該發現向上和向下步進箭頭每次會將值增加和減少 10，而不是 1。您仍然可以手動輸入不是 10 的倍數的數字，但它將被視為無效。

指定最小值和最大值

您可以使用min和max屬性來指定欄位可以具有的最小值和最大值。例如，讓我們為我們的示例設定一個最小值0，和一個最大值100

html

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

在此更新版本中，您應該發現向上和向下步進按鈕不允許您低於 0 或高於 100。您仍然可以手動輸入超出這些範圍的數字，但它將被視為無效。

允許小數值

數字輸入的一個問題是，它們的步進大小預設情況下為 1。如果您嘗試輸入帶有小數的數字（例如“1.0”），它將被視為無效。如果您想輸入需要小數的值，您需要在step值中反映這一點（例如step="0.01"，以允許兩位小數的小數）。這是一個簡單的示例

html

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

請注意，此示例允許0.0和10.0之間的任何值，並允許兩位小數。例如，“9.52”是有效的，但“9.521”是無效的。

如果您想允許任意小數值，您可以將step值設定為"any"。

提供建議值

您可以透過指定list屬性來提供使用者可以選擇的一系列預設選項，該屬性的值為id，它是<datalist>的id，而<datalist>又包含一個<option>元素，每個元素對應一個建議值。每個option的value是數字輸入框中對應的建議值。

html

<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的值

html

<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 如下

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 程式碼如下

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" style="display: none;">
    <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。它與我們之前看到的驗證樣式非常相似；沒有什麼特別的。

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"]');

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 標準 # number-state-(type=number)

瀏覽器相容性

BCD 表格只在啟用 JavaScript 的瀏覽器中載入。

<input type="number">

試一試

價值

附加屬性

`列表`

`max`

`min`

`placeholder`

`readonly`

`step`

使用數字輸入

一個簡單的數字輸入

佔位符

控制步進大小

指定最小值和最大值

允許小數值

控制輸入大小

提供建議值

驗證

模式驗證

可訪問性

例子

技術摘要

規範

瀏覽器相容性

也可以看看