使用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/