基于 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>

Answer 2

是的，这需要 JavaScript。你会做这样的事情：

document.querySelector('#number').addEventListener('input', (e) => {
  e.target.closest('form').querySelector('[name="username"]').maxLength = e.target.value;
});

JSFiddle：https://jsfiddle.net/63cpv8rk/

在这里，我们为 #number 编辑的元素 select 的 input 事件添加了事件处理程序。（虽然你应该避免使用这些 ID 属性......它们不必要地扰乱了全局范围。）

然后在输入时，我们找到父表单，然后 select 按名称输入。最后，我们将其最大长度设置为刚刚放入我们字段中的值。

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

Way to set maxlength on input based on data in another field of same form in html5?

html

javascript

forms

web-frontend