HTML number输入框如何仅允许通过上下箭头调整值，禁止手动输入

解决方案 #

有纯原生实现方案，不需要自定义按钮，仅需给原有输入框增加少量事件限制即可：

方案1：行内属性实现（最简） #

直接在你的input标签上添加键盘输入和粘贴的阻止逻辑即可，修改后代码如下：

<input type="number" min="0" max="99" id="timer02_min" 
maxlength="2" value="00" onkeydown="return false" onpaste="return false">

逻辑说明：

• onkeydown="return false"：阻止所有键盘输入动作，完全不影响鼠标点击上下箭头调整数值的原生功能
• onpaste="return false"：额外拦截粘贴操作，避免用户通过右键菜单粘贴不符合规则的内容

注意不推荐使用readonly属性实现该需求：部分浏览器会将设置了readonly的number输入框的调整箭头置为不可用，反而无法实现点击调整的效果。

方案2：JS事件绑定实现（非行内写法） #

如果不想写行内事件，可以通过原生JS绑定事件实现相同效果：

const timerInput = document.getElementById('timer02_min');
// 阻止键盘输入
timerInput.addEventListener('keydown', e => e.preventDefault());
// 阻止粘贴
timerInput.addEventListener('paste', e => e.preventDefault());

内容的提问来源于stack exchange，提问作者Steak