Text beim Bearbeiten eines Elements in JavaScript ausblenden

Lassen Sie uns nun bewirken, dass beim Bearbeiten die Eingabe direkt im Absatz erscheint - anstelle des Textes dieses Absatzes. Beim Beenden der Bearbeitung soll die Eingabe entfernt werden und stattdessen wieder der Text des Absatzes erscheinen.

Beginnen wir mit der Implementierung.

Lassen Sie uns zunächst bewirken, dass bei einem Klick auf den Absatz ein Eingabefeld mit dem Text dieses Absatzes an sein Ende angehängt wird:

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

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

Unser Code ist jedoch sehr unvollkommen - jedes Mal, wenn auf den Absatz geklickt wird, wird ein neues Eingabefeld hinzugefügt.

Dabei steht, wenn im ersten Eingabefeld der Text des Absatzes steht, im zweiten Eingabefeld bereits der Text des Absatzes zusammen mit dem ersten Eingabefeld, und im dritten Eingabefeld wird bereits der Text des Absatzes zusammen mit zwei Eingabefeldern stehen und so weiter.

Achten Sie auch darauf, dass ein Klick auf das hinzugefügte Eingabefeld als ein Klick auf den Absatz gewertet wird: die Sache ist die, dass sich das Eingabefeld im Absatz befindet, und ein Klick auf das Eingabefeld einfach nach oben zu diesem Absatz aufsteigt (Event Bubbling).

Dies wird dazu führen, dass nach dem Erscheinen des ersten Eingabefelds, wenn wir versuchen, darauf zu klicken, um mit der Bearbeitung zu beginnen, wir automatisch einen Klick auf den Absatz auslösen mit allen sich daraus ergebenden Konsequenzen.

Also, das Problem ist umrissen. Lassen Sie uns es nun beheben.

Dazu lösen wir einfach beim Erscheinen des Eingabefelds den Event-Handler vom Absatz. In diesem Fall wird nur der erste Klick auf den Absatz zum Erscheinen des Eingabefelds führen, und die restlichen Klicks, die nach dem Erscheinen des Eingabefelds gemacht wurden, werden ignoriert.

Implementieren wir es:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
	
	elem.removeEventListener('click', func); // Event abkoppeln
});

Lassen Sie uns nun bewirken, dass beim Erscheinen des Eingabefelds der Text des Absatzes selbst verschwindet. Dazu weisen wir vor dem Einfügen des Eingabefelds den textContent des Absatzes einem leeren String zu:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // zuerst schreiben wir den Text des Absatzes in das Eingabefeld
	elem.textContent = ''; // dann entfernen wir den Text des Absatzes
	elem.appendChild(input); // dann fügen wir das Eingabefeld ein
	
	elem.removeEventListener('click', func);
});

Lassen Sie uns nun bewirken, dass beim Verlust des Fokus im Eingabefeld der Text dieses Eingabefelds in den Absatz geschrieben wird:

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

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

Achten Sie darauf, dass wir das Eingabefeld nicht entfernen müssen - es entfernt sich selbst, wenn es seinen Text in den Absatz schreibt: da das Eingabefeld ein Teil des Textes des Absatzes ist, überschreibt die Zuweisung eines Textes an diesen Absatz einfach unser Eingabefeld, und das war's.

Wir haben jedoch noch ein Problem: Der Text des Absatzes wird nur das erste Mal bearbeitet. Nach der ersten Bearbeitung führt ein erneutes Anklicken des Textes des Absatzes zu nichts.

Die Sache ist die, dass wir im Moment des Erscheinens des Eingabefelds das Event vom Absatz aus den oben beschriebenen Gründen abgekoppelt haben. Jetzt müssen wir im Moment des Beendens der Bearbeitung das Event wieder anbinden.

Setzen wir das um:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.textContent = '';
	elem.appendChild(input);
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		elem.addEventListener('click', func); // Event wieder anbinden
	});
	
	elem.removeEventListener('click', func);
});

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