Skryjme text pri úprave prvku v JavaScripte

Teraz urobme tak, aby sa pri úpravách vstupné pole objavilo priamo v odseku - namiesto textu toho odseku. Nech sa potom po ukončení úprav vstupné pole odstráni a namiesto neho sa opäť objaví text odseku.

Poďme na realizáciu.

Na začiatok urobme tak, aby po kliknutí na odsek sa na jeho konci pridalo vstupné pole s textom tohto odseku:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.appendChild(input);
});

Náš kód je však veľmi nedokonalý - každý raz po kliknutí na odsek sa do neho pridá nové vstupné pole.

Prí tom, ak v prvom vstupnom poli bude text odseku, tak v druhom vstupnom poli už bude text odseku spolu s prvým vstupným poľom, a v treťom vstupnom poli už bude text odseku spolu s dvoma vstupnými poľami a tak ďalej.

Všimnite si tiež, že kliknutie na pridané vstupné pole sa bude považovať za kliknutie na odsek: vec sa má tak, že vstupné pole sa nachádza v odseku a kliknutie na vstupné pole jednoducho vystúpi vyššie k tomuto odseku.

To povedie k tomu, že po objavení sa prvého vstupného poľa pri pokuse o kliknutie naň na to, aby sme začali s úpravami, my automaticky vykonáme kliknutie na odsek so všetkými z toho vyplývajúcimi dôsledkami.

Takže, problém je načrtnutý. Poďme teraz ho opraviť.

Na to jednoducho pri objavení sa vstupného poľa odpojíme od odseku obslužný program kliknutia. V tomto prípade iba prvé kliknutie na odsek povedie k objaveniu sa vstupného poľa, a ostatné kliknutia, vykonané po objavení sa vstupného poľa, budú ignorované.

Realizujme:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.appendChild(input);
  
  elem.removeEventListener('click', func); // odpojíme udalosť
});

Teraz urobme tak, aby pri objavení sa vstupného poľa, text samotného odseku zmizol. Na to pred vložením vstupného poľa textContent odseku priradíme prázdny reťazec:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent; // najprv zapíšeme text odseku do vstupného poľa
  elem.textContent = ''; // potom odstránime text odseku
  elem.appendChild(input); // potom vložíme vstupné pole
  
  elem.removeEventListener('click', func);
});

Teraz urobme tak, aby pri strate fokusu vo vstupnom poli sa text tohto vstupného poľa zapísal do odseku:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent;
  elem.textContent = '';
  elem.appendChild(input);
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
  });
  
  elem.removeEventListener('click', func);
});

Všimnite si, že my nemusíme odstraňovať vstupné pole - odstraňuje sa samo, keď zapíše svoj text do odseku: tak ako vstupné pole je súčasťou textu odseku, tak zápis nejakého textu do tohto odseku jednoducho odstráni naše vstupné pole, a to je všetko.

My však máme ešte jeden problém: text odseku sa bude upravovať iba prvý raz. Po prvej úprave opakované stlačenie na text odseku k ničomu nepovedie.

Vec sa má tak, že v okamihu objavenia sa vstupného poľa sme odpojili udalosť od odseku z vyššie opísaných dôvodov. Teraz potrebujeme v okamihu ukončenia úprav pripojiť udalosť späť.

Urobme to:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.textContent = '';
  elem.appendChild(input);
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
    elem.addEventListener('click', func); // pripojíme udalosť späť
  });
  
  elem.removeEventListener('click', func);
});