<input type="number">
类型为 number 的 <input> 元素用于让用户输入一个数字。它们包含内置验证以拒绝非数字输入。
浏览器可以选择提供步进器箭头，让用户使用鼠标或轻触指尖来增加和减少值。
试一试
<label for="tentacles">Number of tentacles (10-100):</label>
<input type="number" id="tentacles" name="tentacles" min="10" max="100" />
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
在不支持 number 类型输入的浏览器上，number 输入会回退到 text 类型。
值
一个数字，表示输入框中输入的数字值。你可以通过在 value 属性中包含一个数字来设置输入的默认值，如下所示
<input id="number" type="number" value="42" />
附加属性
除了所有 <input> 类型通常支持的属性之外，number 类型的输入还支持这些属性。
list
列表属性的值是位于同一文档中的 <datalist> 元素的 id。<datalist> 为此输入提供了一个预定义值列表，以供用户建议。列表中与 type 不兼容的任何值都不会包含在建议选项中。提供的值是建议，而不是要求：用户可以从这个预定义列表中选择，也可以提供不同的值。
max
此输入允许的最大值。如果输入到元素中的值超过此值，则元素会约束验证失败。如果 max 属性的值不是数字，则该元素没有最大值。
此值必须大于或等于 min 属性的值。
min
此输入接受的最小值。如果元素值小于此值，则元素将约束验证失败。如果为 min 指定的值不是有效的数字，则输入没有最小值。
此值必须小于或等于 max 属性的值。
placeholder
placeholder 属性是一个字符串，它向用户提供一个简短的提示，说明字段中预期哪种信息。它应该是一个词或短语，演示预期的数据类型，而不是解释性消息。文本不能包含回车或换行符。
如果控件的内容具有单一方向性（从左到右或从右到左），但需要以相反的方向性呈现占位符，您可以使用 Unicode 双向算法格式字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用 Unicode 控件处理双向文本。
注意： 如果可以，请避免使用 placeholder 属性。它不如其他解释表单的方式在语义上有用，并且可能导致您的内容出现意外的技术问题。有关更多信息，请参阅<input> 标签。
readonly
一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，其 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。
注意： 由于只读字段不能有值，因此 required 对同时指定了 readonly 属性的输入没有影响。
step
step 属性是一个数字，指定了值必须遵循的粒度，或者特殊值 any，下文将对此进行描述。只有从步长基数计算的整数步长值才有效。如果指定了 min，则步长基数为 min；否则为 value；如果两者均未提供，则为 0。
number 输入的默认步进值为 1，只允许输入整数——除非步进基数不是整数。
字符串值 any 意味着不暗示任何步进，并且允许任何值（排除其他约束，例如 min 和 max）。
注意：当用户输入的数据不符合步进配置时，用户代理可能会四舍五入到最近的有效值，当有两个同样接近的选项时，优先选择正方向的数字。
使用数字输入
number 输入类型仅应用于增量数字，尤其是在旋转按钮递增和递减有助于用户体验时。number 输入类型不适用于碰巧只包含数字但严格来说不是数字的值，例如许多国家的邮政编码或信用卡号。对于非数字输入，请考虑使用不同的输入类型，例如 <input type="tel"> 或其他带有 inputmode 属性的 <input> 类型
<input type="text" inputmode="numeric" pattern="\d*" />
<input type="number"> 元素可以在构建用于在表单中输入数字的用户界面和逻辑时简化您的工作。当您使用正确的 type 值 number 创建数字输入时，您将获得对输入文本是数字的自动验证，并且通常会有一组向上和向下按钮来增加和减少值。
警告： 从逻辑上讲，您不应该在数字输入中输入除数字以外的字符。一些浏览器允许无效字符，另一些则不允许；请参阅 Firefox 错误 1398528。
注意： 用户可以在后台修改您的 HTML，因此您的网站绝不能出于安全目的使用客户端验证。对于提供的值可能具有任何安全隐患的任何事务，您必须在服务器端进行验证。
移动浏览器通过在用户尝试输入值时显示一个更适合输入数字的特殊键盘来进一步帮助用户体验。
一个基本的数字输入
以最基本的形式，数字输入可以这样实现
<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />
当数字输入为空且输入单个数字时，它被认为是有效的，否则无效。如果使用 required 属性，则当输入为空时，它不再被认为是有效的。
占位符
有时，提供一个上下文提示，说明输入数据应采用何种形式，这会很有帮助。如果页面设计不为每个 <input> 提供描述性标签，这尤其重要。这就是占位符的作用。占位符是一个值，最常用于提供一个提示，说明输入应采用 value 的格式。当元素的 value 为 "" 时，它会显示在编辑框中。一旦数据输入到框中，占位符就会消失；如果框被清空，占位符会重新出现。
在这里，我们有一个带有占位符“Multiple of 10”的 number 输入框。请注意，当您操作编辑字段的内容时，占位符如何消失和重新出现。
<input type="number" placeholder="Multiple of 10" />
控制步长
默认情况下，提供给您用于上下步进数字的上下按钮将以 1 为步长增加和减少值。您可以通过提供 step 属性来更改此设置，该属性的值是一个指定步长量的数字。我们上面的示例包含一个占位符，说明该值应为 10 的倍数，因此添加一个 10 的 step 值是很有意义的。
<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 的值。您仍然可以手动输入超出这些范围的数字，但它将被视为无效。
允许小数位
数字输入的一个问题是它们默认步长为 1。如果您尝试输入一个非整数的十进制数（例如“1.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"。
控制输入大小
<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 属性来提供用户可以选择的默认选项列表，该属性的值是 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"> 元素不支持使用 pattern 属性来使输入值符合特定的正则表达式模式。
这样做的理由是，数字输入如果包含除数字以外的任何内容，则无效，并且可以使用 min 和 max 属性来限制有效数字的最小和最大数量（如上所述）。
无障碍
<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">
<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"]');
feetInputGroup.style.display = "none"; // Hide feet/inches inputs initially
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 # 数字状态-(type=number) |
浏览器兼容性
加载中…