JavaScript动态创建input输入框无法显示输入内容及设置值求助

核心错误修正 #

• 输入框内容设置方式错误：input是表单控件，它的内容存储在value属性而非innerHTML中。要预设内容需写inputBox.value = 'J';，输入时的内容也会自动存在value里，这是输入内容不显示的主要原因。
• ID属性赋值错误：代码里inputBox.id.attr = 'attr' + i;是错误写法，正确设置ID应为inputBox.id = 'attr' + i;，错误的ID写法可能引发后续元素操作问题。

额外优化建议 #

• 确保输入框层级：如果canvas用了绝对定位，给输入框添加style.zIndex = '10';（数值大于canvas的z-index），避免被canvas遮挡导致操作异常。
• 规范变量声明：循环里的i未声明会变成全局变量，建议改成for (let i = 0; i < 25; i++)。

修正后的完整代码示例 #

for (let i = 0; i < 25; i++) {
  var inputBox = document.createElement('input');
  inputBox.setAttribute('type', 'text');
  inputBox.style.position = 'absolute';
  inputBox.style.top = 142 + i * 42 + 'px';
  inputBox.style.left = '500px';
  inputBox.style.width = '30px';
  inputBox.style.height = '23px';
  inputBox.style.fontSize = '10px';
  inputBox.style.display = 'block';
  // 正确设置预设内容
  inputBox.value = 'J';
  // 正确设置ID
  inputBox.id = 'attr' + i;
  // 确保输入框在canvas上方
  inputBox.style.zIndex = '10';

  var parentItem = document.getElementById('canvasForHTML');
  parentItem.appendChild(inputBox);
}

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