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

时间:2013-10-09 14:30:17

标签: javascript html input split textarea

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

谢谢!

1 个答案:

答案 0 :(得分:3)

假设您的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/