JavaScript - ＜input＞ 纯数字（type=“number“）输入限制长度、最小值、最大值或多条件同时限制

前言

如果您的数字输入框想要限制长度或最大（小）值，或多条件同时限制，如下代码所示方法不可行：

<input
type="number"
maxlength="5"
max="10"
min="0"
>

解决方案

通过 oninput 事件便可实现（本质就是重新计算结果再返回），如下所示示例代码：

<!-- 限制长度 -->
<input
type="number"
oninput="if(value.length>4)value=value.slice(0,4)"
>

<!-- 限制最大值 -->
<input
type="number"
oninput="if(value>20)value=20"
>

<!-- 限制最小值 -->
<input
type="number"
oninput="if(value<5)value=5"
>

<!-- 多条件同时限制 -->
<input
type="number"
oninput="if(value>50)value=50;if(value.length>2)value=value.slice(0,2);if(value<5)value=5"
>

写在后面

如果你想要更多限制或条件，请通过如下方法进行处理：

<input
type="number"
oninput="handle(value)"
>

/**
 * 数字输入框
 * @description 变化时触发
 * @param {String} value - 输入框值
 * @return void
 */
function handle(value) {
	// if(){...}
	console.log(value)
}