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

注意：不支持 "number" 類型的瀏覽器會(huì)使用標(biāo)準(zhǔn)的"text" input 作為備選。

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

值

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

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

使用 number 輸入框

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

注：記住用戶可以在幕后修改你的HTML是至關(guān)重要的，所以你的網(wǎng)站不能使用簡(jiǎn)單的客戶端驗(yàn)證來實(shí)現(xiàn)任何安全目的。您必須在服務(wù)器端驗(yàn)證所提供的值可能具有任何安全含義的任何事務(wù)。

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

一個(gè)簡(jiǎn)單的 number 輸入框

在最基本的形式中，數(shù)字輸入可以像這樣實(shí)現(xiàn)：

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

數(shù)字輸入被認(rèn)為是空的時(shí)候，當(dāng)輸入一個(gè)單一的號(hào)碼，但是否則是無效的。如果使用該required屬性，則輸入在空時(shí)不再視為有效。

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

占位符

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

在這里，我們有"number"占位符的輸入"Multiple of 10"。請(qǐng)注意占位符在編輯字段的內(nèi)容時(shí)如何消失并重新出現(xiàn)。

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

控制步進(jìn)尺寸

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

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

在這個(gè)例子中，你會(huì)發(fā)現(xiàn)上下箭頭會(huì)增加和減少10，而不是1。你仍然可以手動(dòng)輸入一個(gè)不是10的倍數(shù)的數(shù)字，但是它會(huì)被認(rèn)為是無效的。

指定 最小&最大 值

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

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

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

Allowing decimal values

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

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

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

控制 input 尺寸

<input>類型的元素"number"不支持表單大小屬性，如size。你將不得不求助于CSS來改變這些控件的大小。

例如，要將輸入的寬度調(diào)整為只需要輸入三位數(shù)字所需的寬度，就可以將我們的HTML更改為包含ID并縮短我們的占位符，因?yàn)樽侄螌?duì)于文本來說太窄我們一直在使用：

<input type="number" placeholder="x10" step="10" min="0" max="100" id="number">

然后我們添加一些CSS來縮小元素的寬度ID"number"：

#number {
  width: 3em;}

結(jié)果如下所示：

提供建議值

您可以提供一個(gè)默認(rèn)選項(xiàng)列表，用戶可以通過指定list屬性來選擇，該屬性值包含a的ID<datalist>，而<option>每個(gè)建議值又包含一個(gè)元素;每個(gè)option的value對(duì)于號(hào)碼輸入框?qū)?yīng)的建議值。

<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。

驗(yàn)證

我們已經(jīng)提到了一些數(shù)字輸入的驗(yàn)證特性，但現(xiàn)在讓我們來回顧一下：

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

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

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

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

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

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

應(yīng)用于這個(gè)例子的CSS如下：

div {
  margin-bottom: 10px;}input:invalid+span:after {
  content: '?';
  padding-left: 5px;}input:valid+span:after {
  content: '?';
  padding-left: 5px;}

在這里，我們使用:invalid和 :valid偽類來顯示適當(dāng)?shù)臒o效或有效的圖標(biāo)作為相鄰上生成的內(nèi)容<span>元素，指示該電流值是有效的。我們把它放在一個(gè)單獨(dú)的<span>元素，以增加靈活性;某些瀏覽器不會(huì)在某些類型的表單輸入上非常有效地顯示生成的內(nèi)容（例如，請(qǐng)參閱<input type="date">驗(yàn)證部分）。

重要提示：HTML表單驗(yàn)證是不是用于服務(wù)器端腳本，確保輸入的數(shù)據(jù)是正確的格式的替代品。有人很容易調(diào)整HTML，使他們繞過驗(yàn)證，或完全刪除它。也有可能繞過你的HTML并直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗(yàn)證接收到的數(shù)據(jù)，當(dāng)格式不正確的數(shù)據(jù)被提交（或數(shù)據(jù)太大，類型錯(cuò)誤等等）時(shí)，可能會(huì)發(fā)生災(zāi)難。

驗(yàn)證模式

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

示例

我們已經(jīng)介紹了這樣一個(gè)事實(shí)：默認(rèn)情況下，增量為1，并且可以使用該step屬性來允許十進(jìn)制輸入。讓我們仔細(xì)看看。在下面的例子中，我們?cè)O(shè)置了一個(gè)用于輸入用戶高度的表單。它默認(rèn)接受以米為單位的高度，但是您可以單擊相關(guān)按鈕來更改表單以接受英尺和英寸。以米為單位的高度輸入接受小數(shù)點(diǎn)到兩個(gè)地方。

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>

您會(huì)看到我們正在使用前面文章中已經(jīng)介紹過的許多屬性。既然我們想要以厘米為單位接受米數(shù)值，我們已經(jīng)設(shè)定了這個(gè)step值0.01，所以像1.78這樣的值不會(huì)被認(rèn)為是無效的。我們還提供了該輸入的占位符。

我們隱藏了最初使用的英尺和英寸輸入，style="display: none;"因此米是默認(rèn)輸入類型。

現(xiàn)在到CSS - 這看起來非常類似于我們之前看到的驗(yàn)證樣式;

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 = '';  }});

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

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

規(guī)范

瀏覽器兼容性