区块链Web应用中number输入框max属性更新后不生效求助

你遇到的问题根源在于：HTML <input type="number"> 的max属性仅作用于表单验证环节和输入框的上下箭头控制，不会直接阻止用户手动输入超出范围的数值。即使成功设置了max，用户依然可以输入更大的数，只有在表单提交或主动调用checkValidity()时才会触发验证提示。

解决方案1：实时监听输入，强制限制数值范围 #

在更新max属性后，添加输入事件监听，实时校验输入值，超出范围时自动修正为合法值：

const updateMaxAttribute = async () => {
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  await provider.send("eth_requestAccounts", []);
  const signer = provider.getSigner();
  const contractInstance = new ethers.Contract(contractAddress, contractAbi, signer);
  const candidates = await contractInstance.getAllVotesOfCandiates();
  const maxCandidates = candidates.length;
  const voteInput = document.getElementById('vote');
  const maxValue = maxCandidates - 1;
  
  // 设置max属性
  voteInput.setAttribute('max', maxValue);
  // 添加实时输入监听
  voteInput.addEventListener('input', function() {
    const inputValue = parseInt(this.value, 10);
    const minValue = parseInt(this.min, 10);
    if (isNaN(inputValue)) {
      this.value = minValue; // 空值或非数字时设为最小值
      return;
    }
    if (inputValue > maxValue) {
      this.value = maxValue;
    } else if (inputValue < minValue) {
      this.value = minValue;
    }
  });
  // 监听change事件，处理粘贴等场景
  voteInput.addEventListener('change', function() {
    const inputValue = parseInt(this.value, 10);
    const minValue = parseInt(this.min, 10);
    if (isNaN(inputValue)) {
      this.value = minValue;
      return;
    }
    if (inputValue > maxValue) {
      this.value = maxValue;
    } else if (inputValue < minValue) {
      this.value = minValue;
    }
  });
};

解决方案2：结合表单验证，提交时拦截非法值 #

如果不需要实时修正输入，也可以在表单提交时触发验证，阻止非法值提交：

// 假设你的表单id为voteForm
document.getElementById('voteForm').addEventListener('submit', function(e) {
  const voteInput = document.getElementById('vote');
  if (!voteInput.checkValidity()) {
    e.preventDefault(); // 阻止表单提交
    // 触发浏览器原生验证提示
    voteInput.reportValidity();
  }
});

解决方案3：双重保障（推荐） #

结合上述两种方法，既实时修正输入，又在提交时做最终校验，确保万无一失：

const updateMaxAttribute = async () => {
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  await provider.send("eth_requestAccounts", []);
  const signer = provider.getSigner();
  const contractInstance = new ethers.Contract(contractAddress, contractAbi, signer);
  const candidates = await contractInstance.getAllVotesOfCandiates();
  const maxCandidates = candidates.length;
  const voteInput = document.getElementById('vote');
  const maxValue = maxCandidates - 1;
  
  voteInput.setAttribute('max', maxValue);
  
  // 统一的输入处理函数
  const handleInputChange = () => {
    const inputValue = parseInt(voteInput.value, 10);
    const minValue = parseInt(voteInput.min, 10);
    if (isNaN(inputValue)) {
      voteInput.value = minValue;
      return;
    }
    voteInput.value = Math.max(minValue, Math.min(maxValue, inputValue));
  };
  
  voteInput.addEventListener('input', handleInputChange);
  voteInput.addEventListener('change', handleInputChange);
};

// 表单提交校验
document.getElementById('voteForm').addEventListener('submit', function(e) {
  const voteInput = document.getElementById('vote');
  if (!voteInput.checkValidity()) {
    e.preventDefault();
    voteInput.reportValidity();
  }
});

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