Versteek teks tydens die redigering van 'n element in JavaScript

Laat ons nou maak dat wanneer ons redigeer, die invoerveld in die paragraaf self verskyn - in plaas van die teks van hierdie paragraaf. Laat dan, aan die einde van die redigering, die invoerveld verdwyn, en in plaas daarvan verskyn die paragraaf se teks weer.

Kom ons begin met die implementering.

Om te begin, laat ons maak dat met 'n klik op die paragraaf, 'n invoerveld met die teks van daardie paragraaf aan die einde daarvan gevoeg word:

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

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

Ons kode is egter baie onvolmaak - elke keer as daar op die paragraaf geklik word, sal 'n nuwe invoerveld daaraan toegevoeg word.

Intussen, as die eerste invoerveld die paragraaf se teks bevat, sal die tweede invoerveld reeds die paragraaf se teks saam met die eerste invoerveld bevat, en die derde invoerveld sal dan die paragraaf se teks saam met twee invoervelde bevat, en so aan.

Let ook daarop dat 'n klik op die bygevoegde invoerveld beskou sal word as 'n klik op die paragraaf: die feit is dat die invoerveld geleë is in die paragraaf, en die klik op die invoerveld sal eenvoudig opwaarts borrel na hierdie paragraaf.

Dit sal daartoe lei dat na die verskyning van die eerste invoerveld, wanneer ons probeer om daarop te klik om te begin redigeer, ons outomaties 'n klik op die paragraaf sal maak met al die gevolge daarvan.

So, die probleem is geskets. Laat ons dit nou regstel.

Om dit te doen, moet ons eenvoudig wanneer die invoerveld verskyn, die klik-handler van die paragraaf loskoppel. In hierdie geval sal slegs die eerste klik op die paragraaf lei tot die verskyning van die invoerveld, en al die ander klikke, gemaak na die verskyning van die invoerveld, sal geïgnoreer word.

Kom ons implementeer dit:

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); // koppel die gebeurtenis los
});

Laat ons nou maak dat wanneer die invoerveld verskyn, die teks van die paragraaf self verdwyn. Om dit te doen moet ons voor die invoeging van die invoerveld die textContent van die paragraaf aan 'n leë string toeken:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // skryf eers die paragraaf se teks in die invoerveld
	elem.textContent = ''; // verwijder dan die paragraaf se teks
	elem.appendChild(input); // voeg dan die invoerveld in
	
	elem.removeEventListener('click', func);
});

Laat ons nou maak dat wanneer die fokus in die invoerveld verloor gaan, die teks van hierdie invoerveld in die paragraaf geskryf word:

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

Let daarop dat ons nie die invoerveld hoef te verwyder nie - dit verwyder homself wanneer dit sy teks in die paragraaf skryf: aangesien die invoerveld deel is van die paragraaf se teks, sal die skryf van 'n teks na hierdie paragraaf eenvoudig ons invoerveld uitvee, en dit is al.

Ons het egter nog 'n probleem: die teks van die paragraaf sal slegs die eerste keer geredigeer kan word. Na die eerste redigering sal 'n herhaalde druk op die paragraaf se teks tot niks lei nie.

Die feit is dat op die oomblik wanneer die invoerveld verskyn, ons die gebeurtenis van die paragraaf losgekoppel het vir die redes wat hierbo beskryf is. Nou moet ons op die oomblik wanneer die redigering eindig, die gebeurtenis weer vaskoppel.

Kom ons doen dit:

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); // koppel die gebeurtenis weer vas
	});
	
	elem.removeEventListener('click', func);
});

Los die beskryfde taak onafhanklik op, sonder om na my kode te kyk.