Сплит textarea в разные текстовые поля с javascript

Question

Я довольно неопытный с 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" /> 

Спасибо!

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/