实现长按Span控件增减Input框数值功能的技术问询

原代码通过点击span元素配合eval()实现单次数值增减，现在需要修改为长按持续触发增减，同时我们可以替换掉存在安全风险的eval()，直接通过逻辑处理数值变化。

完整实现代码 #

HTML部分

<div class="control">
  <span data-op="decrease">-</span>
  <input class="num" type="number" max="50" value="1" min="1" disabled />
  <span data-op="increase">+</span>
</div>

注：把原id属性改成data-op语义化属性，更清晰标识操作类型，避免id的滥用。

JavaScript部分

const numInput = document.querySelector(".num");
const controllers = document.querySelectorAll(".control span");
let intervalId = null;

// 数值增减逻辑
const updateNumber = (op) => {
  let currentVal = parseInt(numInput.value);
  const max = parseInt(numInput.max);
  const min = parseInt(numInput.min);

  if (op === "increase" && currentVal < max) {
    numInput.value = currentVal + 1;
  } else if (op === "decrease" && currentVal > min) {
    numInput.value = currentVal - 1;
  }
};

// 绑定控制器事件
controllers.forEach(ctrl => {
  const op = ctrl.dataset.op;

  // 长按开始：按下鼠标启动定时器
  ctrl.addEventListener("mousedown", () => {
    // 先执行一次，避免长按有延迟感
    updateNumber(op);
    // 每隔100ms重复执行增减
    intervalId = setInterval(() => updateNumber(op), 100);
  });

  // 长按结束：松开鼠标或移出元素时清除定时器
  const stopInterval = () => {
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
  };

  ctrl.addEventListener("mouseup", stopInterval);
  ctrl.addEventListener("mouseleave", stopInterval);
});

关键逻辑说明 #

• 替换eval()：直接通过data-op标识的操作类型编写明确的数值增减逻辑，避免eval()带来的代码注入风险，同时提升代码可读性。
• 长按触发机制：
  • 监听mousedown事件，按下时立即执行一次增减操作，再启动定时器持续触发。
  • 监听mouseup和mouseleave事件，确保用户松开鼠标或移出元素时，立即停止持续增减。
• 边界检查：每次增减前都会对比当前值与输入框的max、min属性，保证数值始终在合法范围内。

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