javascript - 基于html5中相同形式的另一个字段中的数据设置输入最大长度的方法？

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

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

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>