Ascundem textul la editarea elementului în JavaScript

Să facem acum astfel încât la editare inputul să apară chiar în paragraf - în locul textului acestui paragraf. Să fie apoi la sfârșitul editării inputul să fie eliminat, iar în locul lui să apară din nou textul paragrafului.

Să începem implementarea.

Pentru început, să facem astfel încât la clic pe paragraf să i se adauge un input cu textul acestui paragraf:

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

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

Codul nostru, totuși, este foarte imperfect - de fiecare dată când se face clic pe paragraf, în el se va adăuga un nou input.

În același timp, dacă în primul input va fi textul paragrafului, atunci în al doilea input va fi deja textul paragrafului împreună cu primul input, iar în al treilea input va fi deja textul paragrafului împreună cu două inputuri și așa mai departe.

Atenție și la faptul că clic pe inputul adăugat va fi considerat ca clic pe paragraf: chestia este că inputul se află în paragraf, iar clic pe input pur și simplu se va propaga în sus către acest paragraf.

Aceasta va duce la faptul că după apariția primului input, la încercarea de a face clic pe el pentru a începe editarea, noi vom face automat clic pe paragraf cu toate consecințele care decurg din aceasta.

Deci, problema este conturată. Să o remediem acum.

Pentru aceasta, pur și simplu la apariția inputului, vom dezlega de la paragraf handler-ul de clic. În acest caz doar primul clic pe paragraf va duce la apariția inputului, iar celelalte clicuri, făcute după apariția inputului, vor fi ignorate.

Să implementăm:

let 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); // dezlegăm evenimentul
});

Să facem acum astfel încât la apariția inputului, textul paragrafului să dispară. Pentru aceasta înainte de inserarea inputului textContent al paragrafului îl vom seta la șir gol:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // mai întâi scriem textul paragrafului în input
	elem.textContent = ''; // apoi eliminăm textul paragrafului
	elem.appendChild(input); // apoi inserăm inputul
	
	elem.removeEventListener('click', func);
});

Să facem acum astfel încât la pierderea focusului în input, textul acestui input să fie scris în paragraf:

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

Atenție la faptul că nu avem nevoie să ștergem inputul - el se șterge singur, când scrie textul său în paragraf: deoarece inputul face parte din textul paragrafului, atunci scrierea unui text în acest paragraf pur și simplu șterge inputul nostru, și gata.

Avem, totuși, încă o problemă: textul paragrafului va fi editat doar prima dată. După prima editare, apăsarea repetată pe textul paragrafului nu va duce la nimic.

Chestia este că în momentul apariției inputului am dezlegat evenimentul de la paragraf din motivele descrise mai sus. Acum este necesar în momentul terminării editării să legăm evenimentul înapoi.

Să facem asta:

let 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); // atașăm evenimentul înapoi
	});
	
	elem.removeEventListener('click', func);
});

Independent, fără a se uita la codul meu, rezolvați problema descrisă.