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

Question

我对 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" />

谢谢！

Answer 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/