Jak chcesz żeby inputy były pod sobą to używaj css'a nie br'a. Do tego używamy css'a.
http://jsbin.com/dihukuj/edit?js,console,output tutaj całość możesz odrazu sprawdzić. Poprostu pomniejsz zakładkę output to inputy same wskoczą pod siebie.
if(!textAreaValue){
textAreaValue = "\n".repeat(inputs.length);
textAreaValue = textAreaValue.split("");
textAreaValue[id - 1] = this.value + "\n";
textArea.value = textAreaValue.join("");
return;
}
to magiczne id - 1 to po to aby przypisywało odpowiednią linijke odpowiedniej tablicy pobranej z textArea. Numerujesz id inputow od 1 a szufladki w tablicy mamy od 0, więc musiałem odejmować 1 od id inputa.
Tworzymy tablice o długości rownej ilości inputów rozdzieloną "\n" a potem do odpowiedniej szufladki ( czyli po this.id - 1 ) dodajemy text z inputa.
const textArea = document.getElementById('textarea1');
const inputsParent = document.getElementById("inputsParent");
const inputs = inputsParent.children;
let addEventListeners = (elements, eventType, event) => {
const collection = (elements.length) ? elements : Array.of(elements);
for(let element of collection){
element.addEventListener(eventType, event);
}
};
function bindToTextArea(){
let textAreaValue = textArea.value;
const id = parseInt(this.id);
if(!textAreaValue){
textAreaValue = "\n".repeat(inputs.length);
textAreaValue = textAreaValue.split("");
textAreaValue[id - 1] = this.value + "\n";
textArea.value = textAreaValue.join("");
return;
}
let textAreaAsArray = textAreaValue.split("\n");
textAreaAsArray[id - 1] = this.value;
textArea.value = textAreaAsArray.join("\n");
}
function bindToInputs (){
let textAreaAsArray = this.value.split("\n");
if(textAreaAsArray.length > inputs.length){
let diff = textAreaAsArray.length - inputs.length;
textAreaAsArray.splice(inputs.length, diff);
}
textAreaAsArray.forEach((value, index) => {
if(inputs[index].value !== value){
const id = inputs[index].id;
const input = document.getElementById(id);
input.value = value;
}
});
}
addEventListeners(inputs, "input", bindToTextArea);
addEventListeners(textArea, "input", bindToInputs);
warunek w bindToInputs jest po to aby nie robiło więcej szufladek w tablicy niż jest inputów. Wszystko poza pierwszymi 5 linijkami nie działa na inputy.
Kod nie jest mega skomplikowanie napisany ,chociaż na pewno dałoby się łatwiej , dasz sobie radę .