使用 javascript 将 textarea 拆分为不同的文本框

【问题标题】：Split textarea into different textboxes with javascript使用 javascript 将 textarea 拆分为不同的文本框
【发布时间】：2013-10-09 14:30:16
【问题描述】：

我对 JavaScript 非常缺乏经验，但需要一个解决方案来解决一个相当简单的问题。

我希望能够在 html textarea 中输入信息，按下按钮并将 textarea 的内容拆分为不同的文本框。也许可视化它会更清楚：

所以我想从这里开始：

<textarea>
Line 1
Line 2
Line 3
<textarea>

到这里：

<input type="text" value="Line 1" />
<input type="text" value="Line 2" />
<input type="text" value="Line 3" />

谢谢！

【问题讨论】：

你试过什么？

标签： javascript html input split textarea

【解决方案1】：

假设你的 HTML 如下

<textarea id="text_area">
Line 1
Line 2
Line 3
</textarea>

<div id="input_text"></div>

此 Javascript 将根据您的文本区域的内容创建输入元素

// Destination element to contain the input elements
var destination = document.getElementById('input_text');

// Contents of textarea
var content = document.getElementById('text_area').innerHTML;

// Array containing each line of the textarea
var lines = content.split('\n');

for(i = 0; i <= lines.length; i++)
{
    if(lines[i] != '' && lines[i] != undefined)
    {
        // Create input element
        el_name = 'input_' + i;
        el = document.createElement('input');
        el.setAttribute('type', 'text');
        el.setAttribute('name', el_name);
        el.setAttribute('value', lines[i]);

        // Append input element to destination
        destination.appendChild(el);
    }
}

这里的工作示例http://fiddle.jshell.net/AvA3a/

【讨论】：