Edycja pojedynczego elementu w JavaScript

Teraz nauczymy się edytować teksty elementów za pomocą pól wprowadzania. Zacznijmy od prostych rzeczy i stopniowo zwiększajmy złożoność.

A więc, załóżmy, że mamy dany akapit i pole input, umieszczone w tym samym rodzicu:

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

Zróbmy tak, aby po utracie fokusu w polu input jego tekst pojawiał się w akapicie:

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

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

Zróbmy teraz tak, aby po wejściu na stronę w polu input już był tekst akapitu. W ten sposób za pomocą pola input będziemy mogli edytować tekst znajdujący się w akapicie.

Zaimplementujmy:

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

input.value = elem.textContent; // zapisujemy w polu input tekst akapitu

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

Pojawienie się pola input

Zróbmy teraz tak, aby pola input początkowo nie było na stronie, a pojawiało się po kliknięciu w akapit. Czyli nasz początkowy HTML będzie wyglądał tak:

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

Na początek po prostu zaimplementujmy pojawienie się pola input, bez edycji:

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

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

A teraz zróbmy tak, aby po utracie fokusu w polu input zmieniał się tekst akapitu:

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

Nasz kod jednak jest niedoskonały, ponieważ każde kliknięcie w akapit będzie prowadzić do pojawienia się nowego pola input.

Aby rozwiązać problem, po prostu po utracie fokusu usuwajmy bieżące pole input:

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(); // usuwamy pole input
  });
  
  elem.parentElement.appendChild(input);
});