Skrytí textu při editaci prvku v JavaScriptu

Nyní uděláme to, aby se při editaci input objevil přímo v odstavci - místo textu tohoto odstavce. Ať se poté po ukončení editace input odstraní a místo něj se znovu objeví text odstavce.

Pusťme se do implementace.

Pro začátek uděláme to, aby se kliknutím na odstavec na jeho konec přidal input s textem tohoto odstavce:

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 velmi nedokonalý - pokaždé po kliknutí na odstavec se do něj přidá nový input.

Přičemž, pokud v prvním inputu bude text odstavce, tak ve druhém inputu již bude text odstavce spolu s prvním inputem, a ve třetím inputu již bude text odstavce spolu se dvěma inputy a tak dále.

Všimněte si také toho, že kliknutí na přidaný input bude považováno za kliknutí na odstavec: je to tím, že input se nachází v odstavci, a kliknutí na input jednoduše probublá nahoru k tomuto odstavci.

To povede k tomu, že po objevení se prvního inputu při pokusu kliknout na něj za účelem zahájení editace, my automaticky provedeme kliknutí na odstavec se všemi z toho vyplývajícími důsledky.

Takže, problém je načrtnut. Nyní jej opravme.

K tomu jednoduše při objevení se inputu odvažme z odstavce obslužnou rutinu kliknutí. V tomto případě povede pouze první kliknutí na odstavec k objevení se inputu, a ostatní kliknutí, provedená po objevení se inputu, budou ignorována.

Implementujme:

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); // odvážeme událost
});

Nyní uděláme to, aby při objevení se inputu, text samotného odstavce zmizel. K tomu před vložením inputu textContent odstavce přiřaďme prázdnému řetězci:

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

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent; // nejprve zapíšeme text odstavce do inputu
  elem.textContent = ''; // poté odstraníme text odstavce
  elem.appendChild(input); // poté vložíme input
  
  elem.removeEventListener('click', func);
});

Nyní uděláme to, aby při ztrátě fokusu v inputu se text tohoto inputu zapsal do odstavce:

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šimněte si, že nemusíme mazat input - ten se smaže sám, když zapíše svůj text do odstavce: protože input je součástí textu odstavce, tak zápis jakéhokoli textu do tohoto odstavce jednoduše smaže náš input, a to je vše.

Máme však ještě jeden problém: text odstavce bude editován pouze poprvé. Po první editaci opakované kliknutí na text odstavce k ničemu nepovede.

Je to tím, že v momentě objevení se inputu jsme odváželi událost od odstavce z výše popsaných důvodů. Nyní musíme v momentě ukončení editace událost znovu připnout.

Udělejme 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); // připneme událost zpět
  });
  
  elem.removeEventListener('click', func);
});