Szöveg elrejtése elem szerkesztésekor JavaScript nyelven

Most tegyük úgy, hogy szerkesztéskor a beviteli mező magában a bekezdésben jelenjen meg - a bekezdés szövege helyett. Legyen ezután a szerkesztés befejeztekor a beviteli mező eltávolítva, és helyette ismét a bekezdés szövege jelenjen meg.

Lássuk a megvalósítást.

Kezdetként tegyük úgy, hogy a bekezdésre kattintáskor a végéhez hozzáadódik egy beviteli mező a bekezdés szövegével:

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

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

A kódunk azonban nagyon tökéletlen - minden egyes alkalommal, amikor a bekezdésre kattintunk, új beviteli mező fog hozzáadódni.

Eközben, ha az első beviteli mezőben a bekezdés szövege áll, akkor a második beviteli mezőben már a bekezdés szövege fog állni az első beviteli mezővel együtt, a harmadik beviteli mezőben pedig már a bekezdés szövege fog állni két beviteli mezővel együtt, és így tovább.

Figyeljünk arra is, hogy a hozzáadott beviteli mezőre kattintás a bekezdésre kattintásként értékelődik ki: az történik, hogy a beviteli mező benne van a bekezdésben, és a rá kattintás egyszerűen felbuborékolt ehhez a bekezdéshez.

Ez ahhoz vezet, hogy az első beviteli mező megjelenése után az rá kattintás próbálkozásakor annak érdekében, hogy szerkesztésbe kezdjünk, mi automatikusan kattintást végzünk a bekezdésen minden ebből fakadó következménnyel.

Tehát, a probléma körvonalazva. Most javítsuk ki.

Ehhez egyszerűen a beviteli mező megjelenésekor oldjuk le a kattintás kezelőjét a bekezdésről. Ebben az esetben csak az első kattintás a bekezdésre fog vezetni a beviteli mező megjelenéséhez, a többi kattintás, amely a beviteli mező megjelenése után történik, figyelmen kívül lesz hagyva.

Valósítsuk meg:

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); // levesszük az eseményt
});

Most tegyük úgy, hogy a beviteli mező megjelenésekor, maga a bekezdés szövege eltűnjön. Ehhez a beviteli mező beszúrása előtt a bekezdés textContent értékét adjuk üres sztringnek:

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

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent; // először a bekezdés szövegét írjuk a beviteli mezőbe
  elem.textContent = ''; // majd eltávolítjuk a bekezdés szövegét
  elem.appendChild(input); // majd beillesztjük a beviteli mezőt
  
  elem.removeEventListener('click', func);
});

Most tegyük úgy, hogy a beviteli mező fókuszvesztésekor a beviteli mező szövege beírásra kerüljön a bekezdésbe:

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

Figyeljünk arra, hogy nem kell eltávolítanunk a beviteli mezőt - az magától eltávolítja, amikor beírja a saját szövegét a bekezdésbe: mivel a beviteli mező a bekezdés szövegének része, ezért valamilyen szöveg beírása ebbe a bekezdésbe egyszerűen eltávolítja a beviteli mezőnket, és ennyi.

Van azonban még egy problémánk: a bekezdés szövege csak az első alkalommal fog szerkeszthető lenni. Az első szerkesztés után a bekezdés szövegére történő ismételt kattintás nem fog semmihez sem vezetni.

Az történik, hogy a beviteli mező megjelenése pillanatában levettük az eseményt a bekezdésről a fent leírt okok miatt. Most szükséges, hogy a szerkesztés befejezése pillanatában visszaadjuk az eseményt.

Végezzük ezt el:

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); // visszaadjuk az eseményt
  });
  
  elem.removeEventListener('click', func);
});