• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

java script textarea i text field

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
186 wizyt
pytanie zadane 20 lipca 2016 w JavaScript przez redstar1 Bywalec (2,200 p.)
zmienione kategorie 20 lipca 2016 przez HaKIM

Czy wie ktos jak rozwiązać następujący problem w js?

Każda linia textarea musi mieć odpowiedni input, każdy input ma swoją linię w textarea.

kod html:
 

<table>
        <td>
            <input id="1" type="text" /><br />
            <input id="2" type="text" /><br />
            <input id="3" type="text" /><br />
            <input id="4" type="text" /><br />
            <input id="5" type="text" /><br />
        </td>
        <td>
            <textarea id="textareaT" cols="30" rows="8"></textarea>
        </td>
</table>


podsunieto mi taka odpowiedz(absolutnie nie jest zla bo jest bardzo dobra)
 

const textarea = document.getElementById('textarea1');

const inputsId = [1,2,3,4,5];

inputsId.forEach(id => {

  const currentElement = document.getElementById(`${id}`);

  currentElement.addEventListener('input', () => {

    textarea.value = '';

 

    inputsId.forEach(id => {

      const input = document.getElementById(`${id}`);

      textarea.value += `\n${input.value}`;

    });

  }, false);

});


problem polega na tym ze dziala to w jedna strone tzn jak wpisze cos w textfieldzie to pojawi sie w arei a potrzebuje zeby dzialalo w obie tzn jak wpisze w textfieldzie pojawia sie w arei a jak wpisze w arei pojawia sie w textfieldzie

komentarz 20 lipca 2016 przez HaKIM Szeryf (87,590 p.)

Zla kategoria.

Kod wstawiaj w przeznaczonych do tego bloczkach: {...} code

1 odpowiedź

+1 głos
odpowiedź 20 lipca 2016 przez uRTLy Bywalec (2,420 p.)
wybrane 20 lipca 2016 przez redstar1
 
Najlepsza

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ę .

komentarz 20 lipca 2016 przez redstar1 Bywalec (2,200 p.)
wielkie dzieki

Podobne pytania

0 głosów
0 odpowiedzi 205 wizyt
pytanie zadane 19 lipca 2016 w JavaScript przez redstar1 Bywalec (2,200 p.)
+1 głos
3 odpowiedzi 257 wizyt
pytanie zadane 23 czerwca 2020 w JavaScript przez Grzegorzko Obywatel (1,110 p.)
0 głosów
0 odpowiedzi 163 wizyt
pytanie zadane 27 września 2019 w JavaScript przez amiluke Obywatel (1,120 p.)

93,086 zapytań

142,044 odpowiedzi

321,467 komentarzy

62,434 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...