使用JavaScript动态创建的文本框无法输入的解决方法咨询

嘿，我明白你遇到的困扰了——创建矩阵风格的输入框后，发现没法在文本框里输入内容对吧？咱们来拆解问题原因，然后给出修复方案。

问题根源 #

你当前代码里每次循环都用 target.innerHTML += ... 来添加元素，这会导致浏览器频繁重新渲染整个DOM：每次执行这个操作时，浏览器会把现有的innerHTML内容重新解析，销毁旧的DOM元素，再创建新的元素。这就意味着之前生成的输入框会被重新创建，它们的可编辑状态、焦点状态都丢失了，自然没法正常输入。

修复方案 #

我们只需要避免频繁修改innerHTML，改成一次性构建内容或者用DOM API直接创建元素，就能解决这个问题。下面是两种可行的修改方式：

方式1：先构建完整HTML字符串，再一次性赋值

这种方式简单直接，先把所有要生成的HTML拼接成一个字符串，最后再替换target的innerHTML，只触发一次DOM渲染：

function create(param) {
  var target = document.getElementById('results');
  var htmlContent = ''; // 初始化空字符串，用来拼接HTML
  
  for(var i = 0; i < param; i += 1) {
    htmlContent += '<br>';
    for(var j = 0; j < param; j += 1) {
      htmlContent += '<input type="text" id="value_' + i + '_' + j + '">';
    }
  }
  
  target.innerHTML = htmlContent; // 一次性替换内容，只渲染一次
}

方式2：使用DocumentFragment批量添加元素（更高效）

这种方式利用DocumentFragment来暂存所有要创建的元素，最后一次性添加到DOM中，全程不会触发中间的页面重绘，性能更好：

function create(param) {
  var target = document.getElementById('results');
  target.innerHTML = ''; // 先清空原有内容
  
  var fragment = document.createDocumentFragment();
  
  for(var i = 0; i < param; i += 1) {
    // 创建换行元素并添加到片段
    var br = document.createElement('br');
    fragment.appendChild(br);
    
    for(var j = 0; j < param; j += 1) {
      // 创建输入框元素并设置属性
      var input = document.createElement('input');
      input.type = 'text';
      input.id = 'value_' + i + '_' + j;
      fragment.appendChild(input);
    }
  }
  
  // 把所有元素一次性添加到目标容器
  target.appendChild(fragment);
}

效果验证 #

把上面任意一种修改后的代码替换你原来的create函数，点击按钮生成5x5的输入框矩阵，就能正常输入内容了。

内容的提问来源于stack exchange，提问作者Luis Fernando Scripcaru