HTML DOM Input Number 对象

HTML DOM Input Number 对象技术文档

HTML DOM Input Number 对象用于操作 input 类型为 number 的表单元素。该对象包含一组属性和方法，可以实现对 input number 元素的获取和设置、限制输入范围、增加或减少值等操作。

属性：

• value：返回 input number 元素的当前值。可以通过设置该属性来改变元素的值。
• defaultValue：返回 input number 元素的默认值。
• min：返回 input number 元素的最小值。
• max：返回 input number 元素的最大值。
• step：返回 input number 元素的步长。步长指的是每次增加或减少的值，默认为 1。
• disabled：返回 input number 元素是否被禁用。

方法：

• stepUp()：将 input number 元素的值增加一步，步长由 step 属性决定。如果元素的值已经达到 max 属性指定的最大值，则不会有任何效果。
• stepDown()：将 input number 元素的值减少一步，步长由 step 属性决定。如果元素的值已经达到 min 属性指定的最小值，则不会有任何效果。
• checkValidity()：检查 input number 元素的值是否合法。如果不合法，返回 false。可以用来验证用户输入的值是否符合要求。

示例代码：

HTML 代码：

<label>年龄：
  <input type="number" id="ageInput" min="0" max="120" step="1" required>
</label>

JavaScript 代码：

var ageInput = document.getElementById("ageInput");
console.log(ageInput.value); // 输出当前值
ageInput.value = 18; // 设置新的值
console.log(ageInput.min); // 输出最小值
console.log(ageInput.max); // 输出最大值
ageInput.stepUp(); // 增加一步
ageInput.stepDown(); // 减少一步
console.log(ageInput.checkValidity()); // 检查值是否合法

可能遇到的问题：

• Chrome 浏览器会在 input number 元素输入框的右侧自动添加上下箭头，用于增加或减少值。
• 一些老旧的浏览器可能不支持 input number 元素，或者支持的不够完整。在编写代码时，一定要做好兼容处理。
• min 和 max 属性可以通过 JavaScript 动态设置。但是如果用户在输入框中输入的值不符合该范围，浏览器会自动将其修正为范围内的最小或最大值。
• step 属性可以为小数，但是如果用户输入的值的小数位数超过了 step 属性指定的精度，则会被自动截断。