Skrytí textu při editaci prvku v JavaScriptu

Nyní uděláme to, aby se při editaci input objevil přímo v odstavci - místo textu tohoto odstavce. Ať se poté po ukončení editace input odstraní a místo něj se znovu objeví text odstavce.

Pusťme se do implementace.

Pro začátek uděláme to, aby se kliknutím na odstavec na jeho konec přidal input s textem tohoto odstavce:

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

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

Náš kód je však velmi nedokonalý - pokaždé po kliknutí na odstavec se do něj přidá nový input.

Přičemž, pokud v prvním inputu bude text odstavce, tak ve druhém inputu již bude text odstavce spolu s prvním inputem, a ve třetím inputu již bude text odstavce spolu se dvěma inputy a tak dále.

Všimněte si také toho, že kliknutí na přidaný input bude považováno za kliknutí na odstavec: je to tím, že input se nachází v odstavci, a kliknutí na input jednoduše probublá nahoru k tomuto odstavci.

To povede k tomu, že po objevení se prvního inputu při pokusu kliknout na něj za účelem zahájení editace, my automaticky provedeme kliknutí na odstavec se všemi z toho vyplývajícími důsledky.

Takže, problém je načrtnut. Nyní jej opravme.

K tomu jednoduše při objevení se inputu odvažme z odstavce obslužnou rutinu kliknutí. V tomto případě povede pouze první kliknutí na odstavec k objevení se inputu, a ostatní kliknutí, provedená po objevení se inputu, budou ignorována.

Implementujme:

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); // odvážeme událost
});

Nyní uděláme to, aby při objevení se inputu, text samotného odstavce zmizel. K tomu před vložením inputu textContent odstavce přiřaďme prázdnému řetězci:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // nejprve zapíšeme text odstavce do inputu
	elem.textContent = ''; // poté odstraníme text odstavce
	elem.appendChild(input); // poté vložíme input
	
	elem.removeEventListener('click', func);
});

Nyní uděláme to, aby při ztrátě fokusu v inputu se text tohoto inputu zapsal do odstavce:

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

Všimněte si, že nemusíme mazat input - ten se smaže sám, když zapíše svůj text do odstavce: protože input je součástí textu odstavce, tak zápis jakéhokoli textu do tohoto odstavce jednoduše smaže náš input, a to je vše.

Máme však ještě jeden problém: text odstavce bude editován pouze poprvé. Po první editaci opakované kliknutí na text odstavce k ničemu nepovede.

Je to tím, že v momentě objevení se inputu jsme odváželi událost od odstavce z výše popsaných důvodů. Nyní musíme v momentě ukončení editace událost znovu připnout.

Udělejme to:

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); // připneme událost zpět
	});
	
	elem.removeEventListener('click', func);
});

Samostatně, bez nahlížení do mého kódu, vyřešte popsaný úkol.