HTML |

简介

<input type="number"> 是 HTML 表单元素的一种，用于接收数字类型的输入。它会在输入框中显示一个数字键盘，方便用户输入数字。

用法

以下是一个简单的示例：

<form>
  <label for="quantity">数量：</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" value="1">
</form>

在上面的示例中，我们创建了一个表单，包含一个标签和一个数字输入框。通过 id 和 name 属性来指定输入框的名称，min 和 max 属性分别指定了该数值可接受的最小值和最大值。另外，我们使用 value 属性来指定输入框的默认值为 1。

在用户输入数字的时候，可以使用 JavaScript 来检查输入的值是否合法，比如：

const quantityInput = document.getElementById('quantity');
quantityInput.addEventListener('change', event => {
  const value = quantityInput.value;
  if (value < 0 || value > 100) {
    alert('请输入 0 到 100 之间的数字！');
    quantityInput.value = 1;
  }
});

属性

<input type="number"> 具有以下重要属性：

• value：设置或返回输入框中的值。
• min：设置或返回输入框中可接受的最小值。
• max：设置或返回输入框中可接受的最大值。
• step：设置或返回输入框中的增量步长。
• name：设置或返回输入框的名称。
• disabled：设置或返回输入框是否被禁用。

浏览器兼容性

<input type="number"> 在现代浏览器中都得到了很好的兼容性。但在 IE9 以下的浏览器中，它只会被渲染成一个普通的文本输入框。

总结

<input type="number"> 是 HTML 表单元素，用于接收数字类型的输入。我们可以通过设置属性来限制输入的范围，并可以通过 JavaScript 来对输入的值进行检查。它具备良好的浏览器兼容性，但需要注意在旧版浏览器中可能只会呈现成文本输入框。