Tekst verbergen bij het bewerken van een element in JavaScript

Laten we nu regelen dat tijdens het bewerken een invoerveld in de alinea zelf verschijnt - in plaats van de tekst van deze alinea. Laat daarna bij het beëindigen van het bewerken het invoerveld verdwijnen, en in plaats daarvan weer de tekst van de alinea verschijnen.

Laten we beginnen met de implementatie.

Laten we eerst regelen dat bij een klik op de alinea een invoerveld aan het einde wordt toegevoegd met de tekst van deze alinea:

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

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

Onze code is echter zeer onvolmaakt - elke keer dat op de alinea wordt geklikt, wordt er een nieuw invoerveld aan toegevoegd.

Tegelijkertijd, als in het eerste invoerveld de tekst van de alinea staat, dan zal in het tweede invoerveld al de tekst van de alinea samen met het eerste invoerveld staan, en in het derde invoerveld zal al de tekst van de alinea samen met twee invoervelden staan, enzovoort.

Let ook op het feit dat een klik op het toegevoegde invoerveld wordt beschouwd als een klik op de alinea: het zit zo, dat het invoerveld zich in de alinea bevindt, en een klik op het invoerveld zal simpelweg omhoog bubbelen naar deze alinea.

Dit zal ertoe leiden dat na het verschijnen van het eerste invoerveld, wanneer we erop proberen te klikken om te beginnen met bewerken, we automatisch een klik op de alinea maken met alle gevolgen van dien.

Goed, het probleem is geschetst. Laten we het nu oplossen.

Hiervoor zullen we simpelweg bij het verschijnen van het invoerveld de klik-handler van de alinea loskoppelen. In dat geval zal alleen de eerste klik op de alinea leiden tot het verschijnen van een invoerveld, en de overige klikken, gedaan na het verschijnen van het invoerveld, zullen worden genegeerd.

Laten we dit implementeren:

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); // koppel de gebeurtenis los
});

Laten we nu regelen dat bij het verschijnen van het invoerveld, de tekst van de alinea zelf verdwijnt. Hiervoor willen we vóór het invoegen van het invoerveld de textContent van de alinea instellen op een lege string:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // eerst schrijven we de tekst van de alinea naar het invoerveld
	elem.textContent = ''; // dan halen we de tekst van de alinea weg
	elem.appendChild(input); // dan voegen we het invoerveld in
	
	elem.removeEventListener('click', func);
});

Laten we nu regelen dat bij het verlies van focus in het invoerveld de tekst van dit invoerveld wordt geschreven in de alinea:

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

Let op het feit dat we het invoerveld niet hoeven te verwijderen - het verwijdert zichzelf wanneer het zijn tekst in de alinea schrijft: omdat het invoerveld deel uitmaakt van de tekst van de alinea, zal het schrijven van een bepaalde tekst naar deze alinea simpelweg ons invoerveld verwijderen, en dat is alles.

We hebben echter nog een probleem: de tekst van de alinea zal slechts de eerste keer bewerkt worden. Na de eerste bewerking zal een herhaalde druk op de tekst van de alinea nergens toe leiden.

Het zit zo, dat op het moment van verschijnen van het invoerveld we de gebeurtenis van de alinea hebben losgekoppeld om de hierboven beschreven redenen. Nu is het nodig op het moment van beëindiging van het bewerken de gebeurtenis opnieuw te koppelen.

Laten we dit doen:

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); // koppel de gebeurtenis opnieuw
	});
	
	elem.removeEventListener('click', func);
});

Los de beschreven taak zelfstandig op, zonder in mijn code te spieken.