动态创建number输入框的min、max属性失效，如何解决？

你设置的min和max属性仅会约束输入框的上下箭头步进操作，不会限制用户手动输入超出范围的数字，这是浏览器的默认行为。要彻底限制输入范围，可以通过以下几种方式实现：

方法1：实时输入校验（推荐） #

通过监听input事件，实时检查输入值，一旦超出范围就自动修正：

let input = document.createElement("input");
input.type = "number";
input.min = "1";
input.max = "12";
input.style.width = "80px";
input.style.textAlign = "center";

// 实时校验输入值
input.addEventListener("input", function() {
  let value = Number(this.value);
  // 处理空值或非数字情况
  if (isNaN(value)) {
    this.value = "";
    return;
  }
  // 超出范围则修正
  if (value < 1) {
    this.value = 1;
  } else if (value > 12) {
    this.value = 12;
  }
});

document.body.appendChild(input);

方法2：失焦时校验 #

如果不需要实时修正，可以在输入框失去焦点（blur事件）时校验并修正：

let input = document.createElement("input");
input.type = "number";
input.min = "1";
input.max = "12";
input.style.width = "80px";
input.style.textAlign = "center";

input.addEventListener("blur", function() {
  let value = Number(this.value);
  if (isNaN(value)) {
    this.value = "";
  } else if (value < 1) {
    this.value = 1;
  } else if (value > 12) {
    this.value = 12;
  }
});

document.body.appendChild(input);

方法3：结合HTML5表单校验（用于提交场景） #

如果这个输入框在表单中，可以利用HTML5的表单校验机制，在提交时阻止非法值：

let input = document.createElement("input");
input.type = "number";
input.min = "1";
input.max = "12";
input.required = true; // 标记为必填
input.style.width = "80px";
input.style.textAlign = "center";

// 监听非法输入事件，提示用户
input.addEventListener("invalid", function(e) {
  e.preventDefault(); // 阻止默认提示
  this.setCustomValidity("请输入1-12之间的数字");
});

// 输入有效时清除自定义提示
input.addEventListener("input", function() {
  this.setCustomValidity("");
});

document.body.appendChild(input);

// 假设表单提交时校验
document.querySelector("form").addEventListener("submit", function(e) {
  if (!input.checkValidity()) {
    e.preventDefault();
    alert("请输入1-12之间的数字");
  }
});

额外提示：type="number"的输入框仍允许用户输入e、+、-等字符（这些属于合法的数字格式），如果要完全禁止这类字符，可以在input事件中过滤：

input.addEventListener("input", function() {
  // 只保留数字
  this.value = this.value.replace(/[^0-9]/g, "");
  // 再进行范围校验
  let value = Number(this.value);
  if (value < 1) this.value = 1;
  else if (value > 12) this.value = 12;
});

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