Editarea unui element individual în JavaScript

Acum vom învăța să edităm textele elementelor cu ajutorul câmpurilor de introducere. Vom începe cu lucruri simple și vom complica treptat.

Deci, să presupunem că avem un paragraf și un input, situate în același părinte:

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

Să facem astfel încât la pierderea focusului în input, textul să apară în paragraf:

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

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

Acum să facem astfel încât la accesarea paginyi în input să fie deja textul paragrafului. Astfel, cu ajutorul input-ului vom putea edita textul situat în paragraf.

Să implementăm:

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

input.value = elem.textContent; // scriem în input textul paragrafului

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

Modificați codul de mai sus astfel încât textul paragrafului să se schimbe nu la pierderea focusului, ci pe măsură ce textul este introdus în input.

Aparența input-ului

Acum să facem astfel încât input-ul să nu fie inițial pe pagină, ci să apară la click pe paragraf. Adică HTML-ul nostru inițial va arăta astfel:

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

Pentru început, să implementăm apariția input-ului, fără editare:

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

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

Și acum să facem astfel încât la pierderea focusului în input, textul paragrafului să se schimbe:

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

Totuși, codul nostru este imperfect, deoarece fiecare clic pe paragraf va duce la apariția unui nou input.

Pentru a rezolva problema, pur și simplu la pierderea focusului vom șterge input-ul curent:

let 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(); // ștergem input-ul
	});
	
	elem.parentElement.appendChild(input);
});

Singur, fără a privi în codul meu, rezolvați problema descrisă.