根据名称属性更改输入的字段宽度

Question

我正在创建一个问答输入字段。我将答案存储在name属性中，以便以后检查。 如何使输入字段与输入字段名称属性中的字符串长度相同？

<input class="field" type="text" name="answer">

例如，以上输入字段的长度应为六个字符。

Answer 1

您需要JavaScript才能完成。

const fields = document.querySelectorAll('.field');
fields.forEach(field => {
  const name = field.getAttribute('name'); 
  field.setAttribute('size', name.length);
  field.value = name;
});

.field {
  font-family: monospace;
}

<input class="field" type="text" name="answer">
<input class="field" type="text" name="another_answer">