Bearbeitung eines einzelnen Elements in JavaScript

Jetzt lernen wir, Texte von Elementen mit Hilfe von Eingabefeldern zu bearbeiten. Wir fangen mit einfachen Dingen an und werden uns allmählich steigern.

Angenommen, wir haben einen Absatz und ein Eingabefeld, die sich in einem gemeinsamen Elternelement befinden:

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

Lassen Sie uns bewirken, dass beim Verlassen des Fokus im Eingabefeld dessen Text im Absatz erscheint:

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

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

Lassen Sie uns nun bewirken, dass beim Laden der Seite im Eingabefeld bereits der Text des Absatzes steht. Auf diese Weise können wir mit Hilfe des Eingabefelds den im Absatz befindlichen Text bearbeiten.

Setzen wir es um:

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

input.value = elem.textContent; // schreiben den Text des Absatzes ins Eingabefeld

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

Modifizieren Sie den obigen Code so, dass sich der Text des Absatzes nicht beim Verlassen des Fokus ändert, sondern während der Texteingabe im Eingabefeld.

Erscheinen des Eingabefelds

Lassen Sie uns nun bewirken, dass das Eingabefeld ursprünglich nicht auf der Seite vorhanden ist, sondern es beim Klick auf den Absatz erscheint. Das heißt, unser anfängliches HTML wird so aussehen:

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

Zuerst implementieren wir einfach das Erscheinen des Eingabefelds, ohne Bearbeitung:

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

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

Und jetzt lassen Sie uns bewirken, dass beim Verlieren des Fokus im Eingabefeld der Text des Absatzes geändert wird:

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

Unser Code ist jedoch unvollkommen, da jeder Klick auf den Absatz zum Erscheinen eines neuen Eingabefelds führen wird.

Um das Problem zu lösen, werden wir einfach beim Verlieren des Fokus das aktuelle Eingabefeld löschen:

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(); // löschen das Eingabefeld
	});
	
	elem.parentElement.appendChild(input);
});

Lösen Sie die beschriebene Aufgabe selbstständig, ohne in meinen Code zu schauen.