Skjuler tekst ved redigering av element på JavaScript

La oss nå gjøre slik at under redigering kommer input-feltet frem i selvet avsnittet - i stedet for teksten i dette avsnittet. La deretter, når redigeringen er avsluttet, input-feltet fjernes, og i stedet kommer teksten i avsnittet tilbake.

La oss begynne implementeringen.

Til å begynne med, la oss gjøre slik at ved klikk på et avsnitt legges det til et input-felt med teksten fra dette avsnittet på slutten:

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

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

Koden vår er imidlertid svært ufullkommen - hver gang det klikkes på avsnittet, vil et nytt input-felt bli lagt til.

Samtidig, hvis det i det første input-feltet står avsnittets tekst, vil det i det andre input-feltet allerede stå avsnittets tekst sammen med det første input-feltet, og i det tredje input-feltet vil det stå avsnittets tekst sammen med to input-felt, og så videre.

Legg også merke til at et klikk på det tilføyde input-feltet vil bli ansett som et klikk på avsnittet: saken er at input-feltet befinner seg i avsnittet, og et klikk på input-feltet vil simpelthen boble opp til dette avsnittet.

Dette vil føre til at etter at det første input-feltet dukker opp, når vi prøver å klikke på det for å begynne redigering, vil vi automatisk gjøre et klikk på avsnittet med alle de medfølgende konsekvensene.

Så, problemet er skissert. La oss nå løse det.

For å gjøre dette, kan vi simpelthen, når input-feltet vises, fjerne klikk-handleren fra avsnittet. I dette tilfellet vil bare det første klikket på avsnittet føre til at input-feltet vises, og de øvrige klikkene, utført etter at input-feltet har dukket opp, vil bli ignorert.

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

La oss nå gjøre slik at når input-feltet vises, forsvinner teksten i selve avsnittet. For å gjøre dette kan vi, før vi setter inn input-feltet, tilordne textContent i avsnittet til 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 teksten fra avsnittet til input-feltet
	elem.textContent = ''; // deretter fjerner vi teksten i avsnittet
	elem.appendChild(input); // deretter setter vi inn input-feltet
	
	elem.removeEventListener('click', func);
});

La oss nå gjøre slik at når fokus forsvinner fra input-feltet, skrives teksten fra dette input-feltet inn i avsnittet:

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

Legg merke til at vi ikke trenger slette input-feltet - det sletter seg selv når det skriver sin tekst inn i avsnittet: siden input-feltet er en del av avsnittets tekst, vil skrivingen av en tekst til dette avsnittet simpelthen slette vårt input-felt, og det er alt.

Vi har imidlertid et problem til: teksten i avsnittet vil bare bli redigert den første gangen. Etter den første redigeringen vil et påfølgende klikk på teksten i avsnittet ikke føre til noe.

Saken er at i øyeblikket input-feltet dukket opp fjernet vi eventet fra avsnittet av de ovenfor beskrevne grunnene. Nå må vi, i øyeblikket redigeringen avsluttes, knytte eventet tilbake.

La oss gjø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); // legger eventet tilbake
	});
	
	elem.removeEventListener('click', func);
});

Løs den beskrevne oppgaven på egen hånd, uten å kikke på koden min.