sap.m.StepInput禁用长按连续增减值（UI5 1.71.50）

问题根源 #

UI5 1.71版本后，浏览器在长按按钮时会强制保持元素焦点直到mouseup事件触发，此时在mousedown/focusin中调用blur()无法立即让按钮失焦，导致原生的长按重复数值增减逻辑仍会执行。

可行解决方案 #

通过拦截按钮的mousedown事件，阻止默认行为并手动触发单次数值调整，彻底规避原生长按重复逻辑：

方案1：直接绑定按钮的mousedown事件

// 在控制器的onAfterRendering或合适位置执行
const oStepInput = this.getView().byId("yourStepInputId");
const oBtnContainer = oStepInput.getDomRef();
// 获取增减按钮
const oIncreaseBtn = oBtnContainer.querySelector(".sapMStepInputIncrease");
const oDecreaseBtn = oBtnContainer.querySelector(".sapMStepInputDecrease");

const handleSingleClick = (e, isIncrease) => {
  // 阻止默认长按重复行为
  e.preventDefault();
  e.stopPropagation();
  // 计算新值，考虑StepInput的步长和边界值
  const currentVal = parseFloat(oStepInput.getValue());
  const step = parseFloat(oStepInput.getStep());
  let newVal = isIncrease ? currentVal + step : currentVal - step;
  // 限制在min和max范围内
  newVal = Math.max(oStepInput.getMin(), Math.min(oStepInput.getMax(), newVal));
  oStepInput.setValue(newVal);
};

// 绑定事件
oIncreaseBtn.addEventListener("mousedown", (e) => handleSingleClick(e, true));
oDecreaseBtn.addEventListener("mousedown", (e) => handleSingleClick(e, false));

方案2：通过UI5的attachBrowserEvent统一处理

// 在控制器中绑定
const oStepInput = this.getView().byId("yourStepInputId");
oStepInput.attachBrowserEvent("mousedown", (e) => {
  const targetBtn = e.target.closest(".sapMStepInputIncrease, .sapMStepInputDecrease");
  if (!targetBtn) return;
  
  e.preventDefault();
  e.stopPropagation();
  
  const isIncrease = targetBtn.classList.contains("sapMStepInputIncrease");
  const currentVal = parseFloat(oStepInput.getValue());
  const step = parseFloat(oStepInput.getStep());
  let newVal = isIncrease ? currentVal + step : currentVal - step;
  // 边界值校验
  newVal = Math.max(oStepInput.getMin(), Math.min(oStepInput.getMax(), newVal));
  oStepInput.setValue(newVal);
}, this);

注意事项 #

• 若UI5版本更新后DOM结构变化，需调整按钮的选择器（优先用官方公开的类名，如sapMStepInputIncrease/sapMStepInputDecrease）
• 处理数值时使用parseFloat适配非整数场景，同时通过getMin()/getMax()确保数值不超出设定范围
• 若需要防止快速连续点击，可在事件处理中临时禁用按钮，mouseup时恢复：

  targetBtn.disabled = true;
  targetBtn.addEventListener("mouseup", () => {
    targetBtn.disabled = false;
  }, { once: true });
  

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