Egyedi elem szerkesztése JavaScript nyelven

Most megtanuljuk, hogyan szerkeszthetjük az elemek szövegét bemeneti mezők segítségével. Kezdjük az egyszerű dolgokkal, és fokozatosan bonyolítsuk.

Tehát, legyen adott egy bekezdés és egy input, amelyek ugyanabban a szülőben helyezkednek el:

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

Tegyük úgy, hogy amikor az input fókuszát veszti, akkor annak szövege megjelenjen a bekezdésben:

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

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

Most tegyük úgy, hogy az oldal betöltésekor az inputban már a bekezdés szövege legyen. Így az input segítségével tudjuk majd a bekezdésben lévő szöveget szerkeszteni.

Valósítsuk meg:

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

input.value = elem.textContent; // beírjuk az inputba a bekezdés szövegét

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

Módosítsa a fenti kódot úgy, hogy a bekezdés szövege ne a fókuszvesztéskor, hanem az inputba történő beírás közben változzon.

Input megjelenése

Most tegyük úgy, hogy az input kezdetben ne legyen az oldalon, hanem akkor jelenjen meg, amikor a bekezdésre kattintunk. Vagyis a kezdeti HTML így fog kinézni:

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

Kezdetben valósítsuk meg csak az input megjelenését, a szerkesztés nélkül:

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

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

Most tegyük úgy, hogy amikor az input elveszti a fókuszt, akkor a bekezdés szövege változzon:

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

A kódunk azonban nem tökéletes, mivel minden bekezdésre kattintás új input megjelenéséhez fog vezetni.

A probléma megoldásához egyszerűen a fókuszvesztéskor távolítsuk el az aktuális inputot:

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(); // eltávolítjuk az inputot
	});
	
	elem.parentElement.appendChild(input);
});

Önállóan, anélkül, hogy belenéznének a kódomba, oldják meg a leírt feladatot.