<input type="number">
类型为 number 的 <input> 元素用于让用户输入数字。它们包括内置验证以拒绝非数字条目。
浏览器可以选择提供步进箭头，让用户使用鼠标或手指轻触来增加和减少值。
试一试
在不支持类型为 number 的输入的浏览器上，number 输入会回退到类型为 text 的输入。
价值
表示输入到输入框中的数字值的数字。您可以通过在 value 属性中包含一个数字来设置输入的默认值，如下所示
<input id="number" type="number" value="42" />
附加属性
除了所有<input>类型通用的属性外，类型为number的输入还支持以下属性。
列表
list属性的值是同一文档中<datalist>元素的id。<datalist>提供一个预定义值的列表，供用户选择此输入的建议值。列表中与type不兼容的任何值都不会包含在建议选项中。提供的值只是建议，不是强制要求：用户可以选择此预定义列表中的值，也可以提供其他值。
max
min
placeholder
placeholder属性是一个字符串，它为用户提供有关该字段中预期输入信息的简短提示。它应该是一个单词或短语，来演示预期的数据类型，而不是解释性信息。文本中不能包含回车符或换行符。
如果控件的内容具有单向性（LTR或RTL），但需要以相反的方向显示占位符，则可以使用Unicode双向算法格式化字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用Unicode控制符进行双向文本。
注意：如果可以，请避免使用placeholder属性。它在语义上不如其他解释表单的方法有用，并且可能会导致内容出现意外的技术问题。有关更多信息，请参阅<input>标签。
readonly
一个布尔属性，如果存在，则表示此字段不能由用户编辑。但是，其value仍然可以通过JavaScript代码直接设置HTMLInputElement value属性来更改。
注意：由于只读字段不能具有值，因此required对同时指定了readonly属性的输入没有任何影响。
step
使用数字输入
number输入类型应该只用于增量数字，特别是当旋转按钮的增加和减少对用户体验有帮助时。number输入类型不适用于恰好只包含数字但严格来说不是数字的值，例如许多国家/地区的邮政编码或信用卡号。对于非数字输入，请考虑使用其他输入类型，例如<input type="tel">或其他<input>类型，以及inputmode属性。
<input type="text" inputmode="numeric" pattern="\d*" />
<input type="number">元素可以帮助简化构建表单中数字输入的用户界面和逻辑的工作。当您使用正确的type值number创建一个数字输入时，您将获得自动验证，确保输入的文本是数字，并且通常会获得一组向上和向下按钮，用于向上和向下步进值。
警告：从逻辑上讲，您不应该在数字输入中输入除数字以外的字符。一些浏览器允许输入无效字符，另一些则不允许；请参阅Firefox 错误 1398528。
注意：用户可以在幕后篡改您的HTML，因此您的网站不能使用简单的客户端验证来实现任何安全目的。您必须在服务器端验证任何交易，其中提供的价值可能具有任何形式的安全影响。
移动浏览器在用户尝试输入值时，通过显示更适合输入数字的特殊键盘，进一步帮助改善用户体验。
一个简单的数字输入
占位符
有时，提供一个上下文提示以说明输入数据的格式是有帮助的。如果页面设计没有为每个<input>提供描述性标签，这尤其重要。这就是占位符的用武之地。占位符是一个值，最常用于提供有关输入应该采用什么格式的提示value。当元素的value为""时，它将在编辑框中显示。一旦在框中输入了数据，占位符就会消失；如果框为空，占位符就会重新出现。
这里，我们有一个number输入，其占位符为“10的倍数”。请注意，当您操作编辑字段的内容时，占位符是如何消失和重新出现的。
<input type="number" placeholder="Multiple of 10" />
控制步进大小
默认情况下，为您提供的用于向上和向下步进数字的向上和向下按钮将使值向上和向下步进 1。您可以通过提供一个step属性来更改此设置，该属性的值是一个数字，用于指定步进量。我们上面的示例中有一个占位符，说明值应该是 10 的倍数，因此添加一个step值为10是有意义的
<input type="number" placeholder="multiple of 10" step="10" />
在此示例中，您应该发现向上和向下步进箭头每次会将值增加和减少 10，而不是 1。您仍然可以手动输入不是 10 的倍数的数字，但它将被视为无效。
指定最小值和最大值
允许小数值
数字输入的一个问题是，它们的步进大小默认情况下为 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"。
控制输入大小
提供建议值
您可以通过指定list属性来提供用户可以选择的一系列默认选项，该属性的值为id，它是<datalist>的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"> 元素的隐式 角色 是 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" 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
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 接口 | |
| 方法 |
select()，stepUp()，stepDown() |
| 隐式 ARIA 角色 | spinbutton |
规范
| 规范 |
|---|
| HTML 标准 # number-state-(type=number) |
浏览器兼容性
BCD 表格只在启用 JavaScript 的浏览器中加载。