Masquer le texte lors de la modification d'un élément en JavaScript

Faisons maintenant en sorte que lors de la modification, l'input apparaisse dans le paragraphe lui-même - à la place du texte de ce paragraphe. Ensuite, à la fin de la modification, l'input doit être supprimé, et le texte du paragraphe doit réapparaître à sa place.

Passons à la mise en œuvre.

Pour commencer, faisons en sorte qu'au clic sur un paragraphe, un input contenant le texte de ce paragraphe lui soit ajouté à la fin :

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

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

Notre code est cependant très imparfait - à chaque clic sur le paragraphe, un nouvel input lui sera ajouté.

De plus, si le premier input contient le texte du paragraphe, alors le deuxième input contiendra déjà le texte du paragraphe avec le premier input, et le troisième input contiendra le texte du paragraphe avec les deux inputs, et ainsi de suite.

Faites également attention au fait qu'un clic sur l'input ajouté sera considéré comme un clic sur le paragraphe : le fait est que l'input se trouve dans le paragraphe, et le clic sur l'input remontera simplement jusqu'au paragraphe.

Cela conduira au fait qu'après l'apparition du premier input, en essayant de cliquer dessus pour commencer la modification, nous ferons automatiquement un clic sur le paragraphe avec toutes les conséquences que cela implique.

Ainsi, le problème est décrit. Maintenant, corrigeons-le.

Pour cela, lors de l'apparition de l'input, détachons simplement le gestionnaire de clic du paragraphe. Dans ce cas, seul le premier clic sur le paragraphe entraînera l'apparition de l'input, et les autres clics, effectués après l'apparition de l'input, seront ignorés.

Mettons en œuvre :

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); // détachons l'événement
});

Faisons maintenant en sorte qu'à l'apparition de l'input, le texte du paragraphe lui-même disparaisse. Pour cela, avant l'insertion de l'input, assignons une chaîne vide au textContent du paragraphe :

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // d'abord, écrivons le texte du paragraphe dans l'input
	elem.textContent = ''; // ensuite, supprimons le texte du paragraphe
	elem.appendChild(input); // ensuite, insérons l'input
	
	elem.removeEventListener('click', func);
});

Faisons maintenant en sorte qu'à la perte du focus de l'input, le texte de cet input soit écrit dans le paragraphe :

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

Notez que nous n'avons pas besoin de supprimer l'input - il se supprime lui-même lorsque il écrit son texte dans le paragraphe : comme l'input fait partie du texte du paragraphe, l'écriture d'un texte dans ce paragraphe supprime simplement notre input, et c'est tout.

Nous avons cependant un autre problème : le texte du paragraphe ne sera modifié qu'une première fois. Après la première modification, un nouvel appui sur le texte du paragraphe n'aura aucun effet.

Le fait est qu'au moment de l'apparition de l'input nous avons détaché l'événement du paragraphe pour les raisons décrites ci-dessus. Maintenant, nous devons, au moment de la fin de la modification, rattacher l'événement.

Faisons cela :

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); // rattachons l'événement
	});
	
	elem.removeEventListener('click', func);
});

Indépendamment, sans regarder mon code, résolvez le problème décrit.