如何让type="number"的input仅可通过点击箭头交互？

要实现仅让number类型输入框的箭头区域可点击，文本显示区域无法点击，可通过JavaScript监听点击位置并拦截非箭头区域的点击事件，具体实现如下：

步骤1：保留原有HTML结构 #

你的原有input代码可直接使用，无需修改结构：

<input id="fraisent" name="fraisent" value="#= tauxAcquisEntree #" max="4" class="form-control text-center arrow-modify" min="1" type="number" step="1" pattern="[0-9]$" autocomplete="off" onkeydown="return false" />

步骤2：添加JavaScript逻辑拦截非箭头区域点击 #

通过监听输入框的mousedown事件（优先于click触发，能有效阻止默认行为），计算点击位置是否处于右侧箭头区域：

const numInput = document.getElementById('fraisent');

numInput.addEventListener('mousedown', function(e) {
  const inputRect = this.getBoundingClientRect();
  const clickPositionX = e.clientX - inputRect.left;
  // 定义右侧箭头区域宽度（可根据浏览器显示效果调整，通常20-30px）
  const arrowAreaWidth = 25;
  
  // 点击位置不在箭头区域内时，阻止默认行为
  if (clickPositionX < inputRect.width - arrowAreaWidth) {
    e.preventDefault();
    e.stopPropagation();
  }
});

原理说明 #

• number类型输入框的上下箭头默认位于控件右侧固定宽度区域内，通过计算点击位置相对于输入框的水平坐标，判断是否属于箭头区域。
• 拦截非箭头区域的mousedown事件，阻止默认的聚焦、点击行为，仅保留箭头区域的交互能力。
• 配合你已有的onkeydown="return false"设置，完全限制了除箭头按钮外的所有修改途径。

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