Redigering av enskilt element med JavaScript

Nu ska vi lära oss att redigera text i element med hjälp av inmatningsfält. Vi börjar med enkla saker och kommer gradvis att göra det mer avancerat.

Så, låt oss säga att vi har ett stycke och ett inmatningsfält, placerade i samma förälder:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Låt oss göra så att när inmatningsfältet förlorar fokus så visas dess text i stycket:

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

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Låt oss nu göra så att när sidan laddas så står styckets text redan i inmatningsfältet. På så sätt kan vi använda inmatningsfältet för att redigera texten som finns i stycket.

Låt oss implementera:

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

input.value = elem.textContent; // sätter in styckets text i inmatningsfältet

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Modifiera koden ovan så att styckets text ändras inte när fokus förloras, utan medan text skrivs in i inmatningsfältet.

Inmatningsfältet visas

Låt oss nu göra så att inmatningsfältet initialt inte finns på sidan, utan att det visas när man klickar på stycket. Det vill säga, vår initiala HTML kommer att se ut så här:

<div id="parent">
	<p id="elem">text</p>
</div>

Låt oss först bara implementera att inmatningsfältet visas, utan redigering:

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

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

Och låt oss nu göra så att när inmatningsfältet förlorar fokus så ändras styckets text:

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

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

Vår kod är dock ofullkomlig, eftersom varje klick på stycket kommer att leda till att ett nytt inmatningsfält visas.

För att lösa problemet, låt oss ta bort det aktuella inmatningsfältet när det förlorar fokus:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // tar bort inmatningsfältet
	});
	
	elem.parentElement.appendChild(input);
});

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