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

Split textarea into different textboxes with javascript

本文关键字：文本 拆分 javascript 区域 使用      更新时间：2023-09-26

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

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

所以我想从这里开始：

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

谢谢！

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

相关文章：