input type="number"

<input type="number">

"number"类型的<input>元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。

注意：不支持 "number" 类型的浏览器会使用标准的"text" input 作为备选。

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

值	代表数字的数字，或者空的数字
活动	改变和输入
支持的通用属性	自动完成，列表，占位符，只读
IDL属性	列表，值，值asNumber
方法	select（），stepUp（），stepDown（）

值

Number表示输入到输入中的数字的值。您可以通过在value属性中包含一个数字来设置输入的默认值，像下面这样：

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

使用 number 输入框

<input type="number">元素可以帮助您在构建用户界面和将数字输入表单的逻辑时简化工作。当您使用适当的type值创建一个数字输入时"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">

在这个例子中，你会发现上下箭头会增加和减少10，而不是1。你仍然可以手动输入一个不是10的倍数的数字，但是它会被认为是无效的。

指定最小&最大值

您可以使用min和max属性来指定该字段可以具有的最小值和最大值。例如，让我们举个例子，最小值为0，最大值为100：

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

在这个更新版本中，您应该会发现向上和向下步骤按钮不会让您低于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之间的任何值，小数点到两个地方。“9.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的倍数或非数值的值，并查看浏览器给出的错误消息的区别与不同的。

应用于这个例子的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属性约束有效数字的最小和最大数量，如上所述。

示例

我们已经介绍了这样一个事实：默认情况下，增量为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 = '';
  }
}

在声明了一些变量之后，我们添加一个事件监听器来控制切换机制。这非常简单，主要涉及改变按钮的类别和标签，并在按下按钮时更新两组输入的显示值。请注意，我们在这里不是在米和英尺/英寸之间来回转换，现实生活中的Web应用程序可能会这样做。

请注意，当用户单击按钮时，我们required从我们隐藏的输入中删除属性，并清空value属性。这样我们就可以提交表格，如果两个输入集都没有填写，也不会提交我们不想提交的数据。如果我们不这样做，你必须填写feet/inches和meters提交表格！

规范

规范	状态	评论
WHATWG HTML生活标准该规范中“<input type =”number“>”的定义。	生活水平	初始定义
HTML 5.1该规范中'<input type ='number'>''的定义。	建议	初始定义

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	10	(Yes)	(Yes)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	iOS WebKit (Safari/Chrome/Firefox/etc.)
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	?	(Yes)	(Yes)