Skjul tekst ved redigering af element på JavaScript

Lad os nu gøre det sådan, at når du redigerer, opstår inputfeltet i selve afsnittet - i stedet for teksten i dette afsnit. Lad herefter, når redigeringen er afsluttet, inputfeltet fjernes, og i stedet vises afsnittets tekst igen.

Lad os komme i gang med implementeringen.

Til at starte med, lad os gøre det sådan, at ved et klik på afsnittet tilføjes et inputfelt til slutningen af det med teksten fra dette afsnit:

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

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

Vores kode er dog meget uperfekt - hver gang der klikkes på afsnittet, vil et nyt inputfelt blive tilføjet til det.

Samtidig, hvis der i det første inputfelt står afsnittets tekst, så vil der i det andet inputfelt allerede stå afsnittets tekst sammen med det første inputfelt, og i det tredje inputfelt vil der allerede stå afsnittets tekst sammen med to inputfelter og så videre.

Læg også mærke til, at et klik på det tilføjede inputfelt vil blive opfattet som et klik på afsnittet: sagen er, at inputfeltet befinder sig i afsnittet, og et klik på inputfeltet vil simpelthen boble op til dette afsnit.

Dette vil føre til, at efter fremkomsten af det første inputfelt, når du forsøger at klikke på det for at begynde redigering, vil vi automatisk lave et klik på afsnittet med alle de deraf følgende konsekvenser.

Så, problemet er skitseret. Lad os nu rette det.

For at gøre dette, lad os simpelthen, når inputfeltet vises, fjerne klik-handleren fra afsnittet. I dette tilfælde vil kun det første klik på afsnittet føre til, at inputfeltet vises, og de resterende klik, lavet efter inputfeltet er vist, vil blive ignoreret.

Lad os implementere:

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); // fjerner eventet
});

Lad os nu gøre det sådan, at når inputfeltet vises, forsvinder afsnittets egen tekst. For at gøre dette, inden indsættelse af inputfeltet, tilskriver vi textContent i afsnittet en tom streng:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // først skriver vi afsnittets tekst i inputfeltet
	elem.textContent = ''; // derefter fjerner vi afsnittets tekst
	elem.appendChild(input); // derefter indsætter vi inputfeltet
	
	elem.removeEventListener('click', func);
});

Lad os nu gøre det sådan, at ved tab af fokus i inputfeltet, bliver teksten fra dette inputfelt skrevet ind i afsnittet:

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

Læg mærke til, at vi ikke har brug for at slette inputfeltet - det sletter sig selv, når det skriver sin tekst ind i afsnittet: da inputfeltet er en del af afsnittets tekst, så vil tilskrivning af en eller anden tekst til dette afsnit simpelthen slette vores inputfelt, og det er det.

Vi har dog endnu et problem: teksten i afsnittet vil kun blive redigeret den første gang. Efter den første redigering vil et gentaget tryk på afsnittets tekst ikke føre til noget.

Det skyldes, at i øjeblikket hvor inputfeltet vises fjernede vi eventet fra afsnittet af de ovenfor beskrevne grunde. Nu er vi nødt til, i øjeblikket for afslutning af redigeringen, at tilknytte eventet igen.

Lad os gøre dette:

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); // tilknytter eventet igen
	});
	
	elem.removeEventListener('click', func);
});

Løs den beskrevne opgave selvstændigt, uden at kigge i min kode.