Diviser textarea dans différentes zones de texte avec javascript

Question

Je suis assez inexpérimenté avec JavaScript, mais j'ai besoin d'une solution pour un problème assez simple. Je souhaite pouvoir entrer des informations dans une zone de texte html, appuyer sur le bouton et diviser le contenu de la zone de texte en différentes zones de texte. Peut-être le visualiser, il sera plus clair:

donc je voudrais passer de ceci:

<textarea> 
Line 1 
Line 2 
Line 3 
<textarea> 

à ceci:

<input type="text" value="Line 1" /> 
<input type="text" value="Line 2" /> 
<input type="text" value="Line 3" /> 

Merci!

Answer 1

Si l'on suppose votre code HTML est comme suit

<textarea id="text_area"> 
Line 1 
Line 2 
Line 3 
</textarea> 

<div id="input_text"></div> 

Ce Javascript crée des éléments d'entrée en fonction du contenu de votre zone de texte

// 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); 
    } 
} 

exemple Travailler ici http://fiddle.jshell.net/AvA3a/