"number"類型的<input>元素用于讓用戶輸入一個數字。其包括內置驗證以拒絕非數字輸入。瀏覽器可能會選擇提供步進箭頭，讓用戶可以使用鼠標增加和減少輸入的值，或者只需用指尖敲擊即可。

注意：不支持 "number" 類型的瀏覽器會使用標準的"text" input 作為備選。

<input id="number" type="number">

值

Number表示輸入到輸入中的數字的值。您可以通過在value屬性中包含一個數字來設置輸入的默認值，像下面這樣：

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

使用 number 輸入框

<input type="number">元素可以幫助您在構建用戶界面和將數字輸入表單的邏輯時簡化工作。當您使用適當的type值創(chuàng)建一個數字輸入時"number"，您將自動驗證輸入的文本是一個數字，通常是一組向上和向下按鈕來上下數值。

注：記住用戶可以在幕后修改你的HTML是至關重要的，所以你的網站不能使用簡單的客戶端驗證來實現任何安全目的。您必須在服務器端驗證所提供的值可能具有任何安全含義的任何事務。

另外，移動瀏覽器通過在用戶嘗試輸入數值時顯示更適合輸入數字的特殊鍵盤來進一步幫助用戶體驗。以下屏幕截圖是從Firefox for Android獲取的：

一個簡單的 number 輸入框

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

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

數字輸入被認為是空的時候，當輸入一個單一的號碼，但是否則是無效的。如果使用該required屬性，則輸入在空時不再視為有效。

注：任何數字都是可接受的值，只要它是有效的浮點數（即不是NaN或無窮大）。

占位符

有時，提供關于輸入數據應該采取何種形式的上下文提示是有幫助的。如果頁面設計沒有為每個頁面提供描述性標簽，這可能尤其重要<input>。這是占位符進來，一個占位符是用來演示的值value應該通過出示有效的值，這顯示在編輯框內部時，元素的的例子value是""。一旦數據輸入框中，占位符消失;如果該框被清空，占位符重新出現。

在這里，我們有"number"占位符的輸入"Multiple of 10"。請注意占位符在編輯字段的內容時如何消失并重新出現。

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

控制步進尺寸

默認情況下，向上和向下按鈕提供您向上和向下步進數字將上下移動值1.您可以通過提供一個step屬性來更改此屬性，該屬性將其值指定為步驟數量。我們上面的例子包含一個占位符，說值應該是10的倍數，所以添加step10的值是有意義的：

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

在這個例子中，你會發(fā)現上下箭頭會增加和減少10，而不是1。你仍然可以手動輸入一個不是10的倍數的數字，但是它會被認為是無效的。

指定 最小&最大 值

您可以使用min和max屬性來指定該字段可以具有的最小值和最大值。例如，讓我們舉個例子，最小值為0，最大值為100：

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

在這個更新版本中，您應該會發(fā)現向上和向下步驟按鈕不會讓您低于0或高于100.您仍然可以在這些范圍外手動輸入一個數字，但它將被視為無效。

Allowing decimal values

數字輸入的一個問題是，他們的步長大小默認為1 - 如果您嘗試輸入一個小數，如“1.0”，它將被視為無效。如果你想輸入一個需要小數的值，你需要在step值中反映這個值（例如step="0.01"，允許小數點到小數點后兩位）。這是一個簡單的例子：

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

看到這個例子允許0.0和10.0之間的任何值，小數點到兩個地方?！?.52”是有效的，但是“9.521”不是，例如。

控制 input 尺寸

<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屬性來選擇，該屬性值包含a的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 value="103421">  <option value="11111111">  <option value="12345678">  <option value="12999922"></datalist>

所有瀏覽器都不支持在輸入中使用該list屬性"number"。它適用于Chrome和Opera，但不適用于Firefox。

驗證

我們已經提到了一些數字輸入的驗證特性，但現在讓我們來回顧一下：

• <input type="number">元素自動使任何不是數字的條目失效（或者是空的，除非required被指定）。

• 您可以使用該required屬性使一個空條目無效，即必須填寫輸入。

• 您可以使用該step屬性將有效值限制為某一組步驟（例如，10的倍數）。

• 您可以使用min和max屬性將有效值限制為下限和上限。

以下示例展示了上述所有功能，以及在輸入值有效/無效時使用一些CSS顯示有效和無效圖標：

<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的倍數或非數值的值，并查看瀏覽器給出的錯誤消息的區(qū)別與不同的。

應用于這個例子的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并直接提交數據到你的服務器。如果您的服務器端代碼無法驗證接收到的數據，當格式不正確的數據被提交（或數據太大，類型錯誤等等）時，可能會發(fā)生災難。

驗證模式

<input type="number">元素不支持使用該pattern屬性來使輸入的值符合特定的正則表達式模式。其原理是數字輸入不能包含除數字以外的任何內容，并且可以使用min和max屬性約束有效數字的最小和最大數量，如上所述。

示例

我們已經介紹了這樣一個事實：默認情況下，增量為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" 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 - 這看起來非常類似于我們之前看到的驗證樣式;

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：

var metersInputGroup = document.querySelector('.metersInputGroup');var feetInputGroup = document.querySelector('.feetInputGroup');var metersInput = document.querySelector('#meters');var feetInput = document.querySelector('#feet');var inchesInput = document.querySelector('#inches');var switchBtn = document.querySelector('input[type="button"]');switchBtn.addEventListener('click', function() {  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 = '';  }});

在聲明了一些變量之后，我們添加一個事件監(jiān)聽器來控制切換機制。這非常簡單，主要涉及改變按鈕的類別和標簽，并在按下按鈕時更新兩組輸入的顯示值。請注意，我們在這里不是在米和英尺/英寸之間來回轉換，現實生活中的Web應用程序可能會這樣做。

請注意，當用戶單擊按鈕時，我們required從我們隱藏的輸入中刪除屬性，并清空value屬性。這樣我們就可以提交表格，如果兩個輸入集都沒有填寫，也不會提交我們不想提交的數據。如果我們不這樣做，你必須填寫feet/inches和meters提交表格！

規(guī)范

瀏覽器兼容性