Egyedi elem szerkesztése JavaScript nyelven

Most megtanuljuk, hogyan szerkeszthetjük az elemek szövegét bemeneti mezők segítségével. Kezdjük az egyszerű dolgokkal, és fokozatosan bonyolítsuk.

Tehát, legyen adott egy bekezdés és egy input, amelyek ugyanabban a szülőben helyezkednek el:

html<div id="parent">
  <p id="elem">text</p>
  <input id="input">
</div>

Tegyük úgy, hogy amikor az input fókuszát veszti, akkor annak szövege megjelenjen a bekezdésben:

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

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Most tegyük úgy, hogy az oldal betöltésekor az inputban már a bekezdés szövege legyen. Így az input segítségével tudjuk majd a bekezdésben lévő szöveget szerkeszteni.

Valósítsuk meg:

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

input.value = elem.textContent; // beírjuk az inputba a bekezdés szövegét

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Input megjelenése

Most tegyük úgy, hogy az input kezdetben ne legyen az oldalon, hanem akkor jelenjen meg, amikor a bekezdésre kattintunk. Vagyis a kezdeti HTML így fog kinézni:

html<div id="parent">
  <p id="elem">text</p>
</div>

Kezdetben valósítsuk meg csak az input megjelenését, a szerkesztés nélkül:

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

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

Most tegyük úgy, hogy amikor az input elveszti a fókuszt, akkor a bekezdés szövege változzon:

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

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

A kódunk azonban nem tökéletes, mivel minden bekezdésre kattintás új input megjelenéséhez fog vezetni.

A probléma megoldásához egyszerűen a fókuszvesztéskor távolítsuk el az aktuális inputot:

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

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  input.addEventListener('blur', function() {
    elem.textContent = this.value;
    this.remove(); // eltávolítjuk az inputot
  });
  
  elem.parentElement.appendChild(input);
});