根据html5中相同形式的另一个字段中的数据在输入上设置maxlength的方法？

Question

如何将文本输入字段中的maxlength属性设置为等于用户在同一表单中的数字输入字段中输入的值？

<form action="/action_page.php">
  <input id="number" type="number" value="20" max="40">
  <input type="text" id="username" name="username" maxlength="10"><br><br>
  <input type="submit" value="Submit">
</form>

我猜这可能需要 JavaScript？

Answer 1

您可以maxlength在input事件上设置属性。

document.querySelector("#number").addEventListener("input", function(e){
  document.querySelector("#username").maxLength = this.value;
});

<form>
  <input id="number" type="number" value="20" max="40">
  <input type="text" id="username" name="username" maxlength="20"><br><br>
  <input type="submit" value="Submit">
</form>