Redigering av enkelt element på JavaScript

Nå skal vi lære å redigere tekster elementer ved hjelp av inndatafelt. La oss starte med enkle ting og gradvis gjøre det mer komplekst.

Så la oss si at vi har et avsnitt og et inndatafelt, plassert i samme forelder:

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

La oss gjøre det slik at når fokus går tapt i inndatafeltet, vises teksten i avsnittet:

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

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

La oss nå gjøre det slik at når vi kommer til siden, står teksten fra avsnittet allerede i inndatafeltet. På denne måten kan vi ved hjelp av inndatafeltet redigere teksten som ligger i avsnittet.

La oss implementere:

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

input.value = elem.textContent; // skriver inn avsnittets tekst i inndatafeltet

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

Modifiser koden ovenfor slik at avsnittets tekst endres ikke når fokus går tapt, men etter hvert som tekst skrives inn i inndatafeltet.

Inndatafeltets opptreden

La oss nå gjøre det slik at inndatafeltet initialt ikke er på siden, men det dukker opp ved klikk på avsnittet. Det vil si at vår første HTML vil se slik ut:

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

La oss først bare implementere at inndatafeltet dukker opp, uten redigering:

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

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

Og la oss nå gjøre det slik at når fokus går tapt i inndatafeltet, endres avsnittets tekst:

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

Koden vår er imidlertid ikke perfekt, ettersom hvert klikk på avsnittet vil føre til at et nytt inndatafelt dukker opp.

For å løse problemet, la oss bare når fokus går tapt slette det nåværende inndatafeltet:

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(); // sletter inndatafeltet
	});
	
	elem.parentElement.appendChild(input);
});

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