input number类型设置最大值最小值
时间: 2023-11-08 16:23:02 浏览: 200
要设置input元素的最大值和最小值,可以使用HTML5中提供的"number"类型。这种类型的input元素可以接受数字输入,并且可以设置最小值和最大值限制。
你可以使用min和max属性来设置最小值和最大值,例如:
```html
<input type="number" min="0" max="999">
```
上述代码会创建一个number类型的输入框,该输入框的最小值为0,最大值为999。如果用户在输入框中输入小于0的值或大于999的值,输入框会自动报错。
如果你想要自定义错误提示信息,可以使用"setCustomValidity"方法。例如:
```html
<input type="number" min="0" max="999" oninput="checkValue(this)" required>
```
```javascript
function checkValue(input) {
if (input.validity.rangeUnderflow) {
input.setCustomValidity("输入值不能小于0");
} else if (input.validity.rangeOverflow) {
input.setCustomValidity("输入值不能大于999");
} else {
input.setCustomValidity("");
}
}
```
上述代码会在输入框的oninput事件中调用checkValue函数,该函数会检查输入值是否在最小值和最大值之间,并根据结果设置自定义错误提示信息。如果输入值小于最小值,会提示"输入值不能小于0";如果输入值大于最大值,会提示"输入值不能大于999";否则,自定义错误提示信息为空。
阅读全文