使用JavaScript动态设置input输入框min属性不生效问题求解

• 事件触发条件错误：你给文具类型输入框绑定的是keyup事件，只有通过键盘输入内容时才会触发，用户直接选择datalist下拉选项时不会触发该事件，导致min/step属性根本没有被设置到数量输入框上。
• 目标元素定位错误：文具类型输入框的nextElementSibling是紧随其后的<datalist>标签，不是你要修改的数量输入框（数量输入框在相邻的<td>节点内），你现在是把min和step属性错设到了datalist元素上，对数量输入框完全没有生效。
• 校验逻辑覆盖不全：原生number输入框的min属性仅会在表单提交时做校验，输入过程中不会阻止用户输入小于最小值的内容，你仅绑定了change事件校验，用户输入后不失去焦点就不会触发修正逻辑。

无需修改HTML代码，仅替换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 options = document.querySelectorAll(".option1");
options.forEach(function(option) {
  // 替换为input事件，同时覆盖键盘输入、下拉选择两种场景
  option.addEventListener("input", function() {
    calculatingMinimunQuantity(option);
  });
  
  // 定位到对应行的数量输入框
  const qtyInput = option.closest('td').nextElementSibling.querySelector('input[type="number"]');
  // 同时绑定input+change事件，实时校验输入值
  ['input', 'change'].forEach(evtType => {
    qtyInput.addEventListener(evtType, e => {
      const minLimit = +e.target.min || 0;
      if (e.target.value && +e.target.value < minLimit) {
        e.target.value = minLimit;
      }
    })
  })
});

function calculatingMinimunQuantity(option) {
  var minimum = 0, step1 = 1;
  var value = option.value.trim();
  if (value === "PENCIL") {
    minimum = 5;
    step1 = 5;
  } else if (value === "NOTEPAD") {
    minimum = 10;
    step1 = 10;
  }
  // 给正确的数量输入框设置属性
  const qtyInput = option.closest('td').nextElementSibling.querySelector('input[type="number"]');
  qtyInput.setAttribute("min", minimum);
  qtyInput.setAttribute("step", step1);
  // 若已有输入值立刻做校验修正
  if (qtyInput.value && +qtyInput.value < minimum) {
    qtyInput.value = minimum;
  }
}

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