Döljer text vid redigering av element med JavaScript

Låt oss nu göra så att när vi redigerar dyker inputfältet upp i själva stycket - istället för texten i det här stycket. Låt sedan när redigeringen avslutas inputfältet tas bort, och istället visas styckets text igen.

Låt oss börja implementera.

Låt oss först göra så att vid klick på ett stycke läggs ett inputfält till i slutet av det med texten från det stycket:

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

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

Vår kod är dock mycket ofullkomlig - varje gång man klickar på stycket kommer ett nytt inputfält att läggas till.

Samtidigt, om det första inputfältet innehåller styckets text, kommer det andra inputfältet att innehålla styckets text tillsammans med det första inputfältet, och det tredje inputfältet kommer att innehålla styckets text tillsammans med två inputfält och så vidare.

Var också uppmärksam på att ett klick på det tillagda inputfältet kommer att betraktas som ett klick på stycket: saken är den att inputfältet finns i stycket, och ett klick på inputfältet bubblar helt enkelt upp till detta stycke.

Detta kommer att leda till att efter att det första inputfältet har dykt upp, när man försöker klicka på det för att börja redigera, kommer vi automatiskt att göra ett klick på stycket med alla konsekvenser det får.

Så, problemet är beskrivet. Låt oss nu åtgärda det.

För att göra detta, när inputfältet dyker upp, tar vi helt enkelt bort klick-hanteraren från stycket. I det här fallet kommer bara det första klicket på stycket att leda till att inputfältet dyker upp, och resten av klicken, gjorda efter att inputfältet har dykt upp, kommer att ignoreras.

Låt oss implementera:

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); // tar bort händelsen
});

Låt oss nu göra så att när inputfältet dyker upp, försvinner själva styckets text. För detta, innan inputfältet infogas, sätter vi textContent för stycket till en tom sträng:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // först skriver vi styckets text i inputfältet
	elem.textContent = ''; // sedan tar vi bort styckets text
	elem.appendChild(input); // sedan infogar vi inputfältet
	
	elem.removeEventListener('click', func);
});

Låt oss nu göra så att när fokus försvinner från inputfältet skrivs texten från det inputfältet in i stycket:

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

Var uppmärksam på att vi inte behöver ta bort inputfältet - det tar bort sig själv när det skriver sin text till stycket: eftersom inputfältet är en del av styckets text, så tar skrivandet av någon text till detta stycke helt enkelt bort vårt inputfält, och det är allt.

Vi har dock ytterligare ett problem: texten i stycket kommer bara att redigeras den första gången. Efter den första redigeringen kommer ett upprepade klick på styckets text inte att leda till något.

Saken är att i det ögonblick inputfältet dök upp kopplade vi bort händelsen från stycket av de skäl som beskrivits ovan. Nu behöver vi i det ögonblick redigeringen avslutas koppla tillbaka händelsen.

Låt oss göra det:

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); // lägger tillbaka händelsen
	});
	
	elem.removeEventListener('click', func);
});

Lös den beskrivna uppgiften på egen hand, utan att kolla på min kod.