input number 数字输入限制，最大值最小值输入范围限制

input number 数字输入限制，最大值最小值输入范围限制

前言

有时候我们会有一些需求限制输入数字的大小，比如一个24小时数字输入框，7天数字输入框等等，这个时候我们就需要单独进行处理了。

解决方案

我看了看网上，解决方案不少，总结了一下，有以下几种方式。
方式一： max=“10”,min=“1” 限制最大值为10，最小值为1
这种方法非常便捷，但值得注意的是，这种方式限制的是数字输入框右边的增减箭头按钮，最大值和最小值，不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数，还是无法限制。

<input type="number" max="100" min="10" value="">

方式二：
使用input标签的oninput方法，在输入时进行监听，当判断打到某个条件时，进行处理将值替换成我们想要的数值。
// 限制长度：输入三位数的数字

<input type="number" oninput="if(value.length>4)value=value.slice(0,4);" />

// 限制大小 大于等于0 但小于等于24的整数

<input type="number" oninput="if(value<=0)value=0;if(value>=24)value=24;value=parseInt(value)" />

总结

感谢大家的阅读，如有疑问，欢迎评论区一起探讨。