使用JavaScript修改HTML input输入框属性未生效问题排查求助

问题根因 #

• 事件监听类型错误：你绑定了keyup事件，但用户从datalist下拉选择选项时不会触发keyup，导致计算最小值的逻辑没有执行
• DOM节点获取错误：.option1输入框的直接下一个兄弟节点是<datalist>元素，不是数量输入框，用nextElementSibling拿不到目标节点，自然改不到数量框的min属性

修复方案 #

修改后的JS代码如下：

function random() {
  document.querySelector('[name="stationerytype[]"]').value = ""
  var a = document.getElementById('purpose').value;
  var datalist = a === "Meeting" ? "datalist1" : "datalist2";
  document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}

var stationeryTypeInputs = document.querySelectorAll(".option1");
stationeryTypeInputs.forEach(function(typeInput) {
  // 改用input事件，兼容键盘输入和下拉选择两种场景
  typeInput.addEventListener("input", function() {
    calculatingMinimunQuantity(typeInput);
  });
  // 保留数量框的change校验逻辑
  getQuantityInput(typeInput).addEventListener('change', evt => {
    if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
  });
});

// 封装方法精准获取对应数量输入框
function getQuantityInput(typeInput) {
  // 先找当前文具类型输入框的父td节点，再找下一个td里的数字输入框
  return typeInput.closest('td').nextElementSibling.querySelector('input[type="number"]');
}

function calculatingMinimunQuantity(typeInput) {
  var minimum = 0, step1 = 1;
  var value = typeInput.value.trim().toUpperCase();
  if (value === "PENCIL") {
    minimum = 5;
    step1 = 5;
  } else if (value === "NOTEPAD") {
    minimum = 10;
    step1 = 10;
  }
  const quantityInput = getQuantityInput(typeInput);
  quantityInput.setAttribute("min", minimum);
  quantityInput.setAttribute("step", step1);
  // 自动修正已输入的不符合最小值的数值
  if (+quantityInput.value < minimum) {
    quantityInput.value = minimum;
  }
}

优化说明 #

• 用input事件替代keyup，无论用户是手动输入还是点击datalist选项都能触发逻辑
• 通过父级td节点定位数量输入框，避免DOM层级变化导致的节点获取错误
• 每次更新min属性后自动检查当前输入值，小于最小值时自动修正，避免用户提前输入不符合要求的数值

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