Redigering van 'n Individuele Element in JavaScript

Ons gaan nou leer hoe om die teks van elemente te redigeer deur middel van invoervelde. Ons begin met eenvoudige dinge en sal geleidelik moeiliker maak.

So, laat ons aanneem ons het 'n paragraaf en 'n invoerveld, wat in dieselfde ouer geplaas is:

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

Laat ons maak dat wanneer die invoerveld fokus verloor, sy teks in die paragraaf verskyn:

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

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

Laat ons nou maak dat wanneer die bladsy gelaai word, die invoerveld reeds die teks van die paragraaf bevat. Op hierdie manier kan ons die teks in die paragraaf redigeer deur die invoerveld te gebruik.

Laat ons dit implementeer:

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

input.value = elem.textContent; // skryf die paragraaf se teks in die invoerveld

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

Wysig die bostaande kode sodat die paragraaf se teks verander nie wanneer fokus verloor word nie, maar soos die teks in die invoerveld getik word.

Verskyning van die Invoerveld

Laat ons nou maak dat die invoerveld aanvanklik nie op die bladsy is nie, maar dat dit verskyn wanneer op die paragraaf geklik word. Dus sal ons aanvanklike HTML so lyk:

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

Om te begin, implementeer ons net die verskyning van die invoerveld, sonder redigering:

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

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

En nou laat ons maak dat wanneer die invoerveld fokus verloor, die paragraaf se teks verander:

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

Ons kode is eger nie perfek nie, aangesien elke klik op die paragraaf 'n nuwe invoerveld sal laat verskyn.

Om die probleem op te los, sal ons eenvoudig die huidige invoerveld verwyder wanneer fokus verloor word:

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(); // verwyder die invoerveld
	});
	
	elem.parentElement.appendChild(input);
});

Los die beskryfde taak self op, sonder om na my kode te kyk.