如何实现根据TXT文件行数动态生成HTML表单文本域并填充内容

修改后的HTML代码 #

移除固定的三个textarea，替换为一个用于动态生成内容的容器：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>动态生成Textarea</title>
</head>
<body>
  <form name="mainForm" method="get" id="Main">
    <!-- 动态textarea的容器 -->
    <div id="textareaContainer"></div>
    <p>
      <div>
        <label for="file">选择TXT文件上传</label>
        <input type="file" id='fileinput' accept=".txt">
      </div>
    </p>
  </form>
</body>
</html>

修改后的JavaScript代码 #

更新逻辑，实现根据文件行数动态生成textarea并填充内容：

(function() {
  var input = document.getElementById("fileinput");
  var container = document.getElementById("textareaContainer");
  input.addEventListener("change", loadFile, false);

  function loadFile() {
    var file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("当前浏览器不支持FileReader API");
      return;
    }

    if (!input.files || !input.files[0]) {
      alert("请先选择一个TXT文件");
      return;
    }

    file = input.files[0];
    fr = new FileReader();
    fr.onload = receivedText;
    fr.readAsText(file);
  }

  function receivedText() {
    // 分割文件内容为行，过滤可能的空行（若需保留空行可删除filter逻辑）
    var lines = fr.result.split('\n').filter(line => line.trim() !== '');
    
    // 清空容器内现有内容
    container.innerHTML = '';

    // 循环生成每个textarea
    lines.forEach((line, index) => {
      // 创建标签元素
      var label = document.createElement('label');
      label.textContent = `input ${index + 1}:`;
      
      // 创建textarea元素
      var textarea = document.createElement('textarea');
      textarea.id = `input${index + 1}`;
      textarea.cols = 20;
      textarea.rows = 2;
      textarea.value = line;

      // 创建包裹元素并添加到容器
      var p = document.createElement('p');
      p.appendChild(label);
      p.appendChild(textarea);
      container.appendChild(p);
    });
  }
})();

关键修改说明 #

• HTML结构调整：移除固定的三个textarea，新增textareaContainer作为动态内容的挂载点，确保每次选择文件时能重新生成内容。
• 清空容器：每次处理新文件前先清空容器，避免旧内容残留。
• 循环生成元素：通过forEach遍历文件的每一行，动态创建标签和textarea，设置对应的ID、属性和内容后添加到容器中。
• 空行过滤：使用filter去除空行，若需要保留空行可删除该过滤逻辑。

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