Nascondere il testo durante la modifica di un elemento in JavaScript

Ora facciamo in modo che durante la modifica l'input appaia nel paragrafo stesso - al posto del testo di questo paragrafo. E che poi, al termine della modifica, l'input venga rimosso, e al suo posto ricompaia il testo del paragrafo.

Iniziamo con l'implementazione.

Per cominciare, facciamo in modo che cliccando sul paragrafo gli venga aggiunto in fondo un input con il testo di questo paragrafo:

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

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

Tuttavia, il nostro codice è molto imperfetto - ogni volta che si clicca sul paragrafo, verrà aggiunto un nuovo input.

In questo caso, se nel primo input ci sarà il testo del paragrafo, nel secondo input ci sarà il testo del paragrafo insieme al primo input, nel terzo input ci sarà il testo del paragrafo insieme a due input e così via.

Fate anche attenzione al fatto che un clic sull'input aggiunto verrà interpretato come un clic sul paragrafo: il fatto è che l'input si trova nel paragrafo, e il clic sull'input semplicemente risalirà (al evento bubbling) fino a questo paragrafo.

Ciò porterà al fatto che dopo la comparsa del primo input, tentando di cliccarci sopra per iniziare la modifica, faremo automaticamente un clic sul paragrafo con tutte le conseguenze del caso.

Quindi, il problema è delineato. Ora risolviamolo.

Per farlo, semplicemente quando appare l'input, rimuoviamo dal paragrafo il gestore del clic. In questo caso solo il primo clic sul paragrafo porterà alla comparsa dell'input, mentre i clic successivi, fatti dopo la comparsa dell'input, verranno ignorati.

Implementiamo:

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); // rimuoviamo l'evento
});

Ora facciamo in modo che quando appare l'input, il testo del paragrafo stesso scompaia. Per farlo, prima di inserire l'input, assegniamo a textContent del paragrafo una stringa vuota:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // prima scriviamo il testo del paragrafo nell'input
	elem.textContent = ''; // poi rimuoviamo il testo del paragrafo
	elem.appendChild(input); // poi inseriamo l'input
	
	elem.removeEventListener('click', func);
});

Ora facciamo in modo che quando l'input perde il focus, il testo di questo input venga scritto nel paragrafo:

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

Fate attenzione al fatto che non abbiamo bisogno di eliminare l'input - esso si elimina da solo quando scrive il suo testo nel paragrafo: poiché l'input fa parte del testo del paragrafo, la scrittura di un testo qualsiasi in questo paragrafo semplicemente elimina il nostro input, e tutto qui.

Tuttavia, abbiamo ancora un problema: il testo del paragrafo sarà modificabile solo la prima volta. Dopo la prima modifica, un'ulteriore pressione sul testo del paragrafo non porterà a nulla.

Il fatto è che nel momento in cui appare l'input abbiamo rimosso l'evento dal paragrafo per le ragioni descritte sopra. Ora dobbiamo, nel momento in cui termina la modifica, riassegnare l'evento.

Facciamolo:

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); // riassegniamo l'evento
	});
	
	elem.removeEventListener('click', func);
});

In autonomia, senza guardare il mio codice, risolvete il problema descritto.