Skryjme text pri úprave prvku v JavaScripte

Teraz urobme tak, aby sa pri úpravách vstupné pole objavilo priamo v odseku - namiesto textu toho odseku. Nech sa potom po ukončení úprav vstupné pole odstráni a namiesto neho sa opäť objaví text odseku.

Poďme na realizáciu.

Na začiatok urobme tak, aby po kliknutí na odsek sa na jeho konci pridalo vstupné pole s textom tohto odseku:

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 veľmi nedokonalý - každý raz po kliknutí na odsek sa do neho pridá nové vstupné pole.

Prí tom, ak v prvom vstupnom poli bude text odseku, tak v druhom vstupnom poli už bude text odseku spolu s prvým vstupným poľom, a v treťom vstupnom poli už bude text odseku spolu s dvoma vstupnými poľami a tak ďalej.

Všimnite si tiež, že kliknutie na pridané vstupné pole sa bude považovať za kliknutie na odsek: vec sa má tak, že vstupné pole sa nachádza v odseku a kliknutie na vstupné pole jednoducho vystúpi vyššie k tomuto odseku.

To povedie k tomu, že po objavení sa prvého vstupného poľa pri pokuse o kliknutie naň na to, aby sme začali s úpravami, my automaticky vykonáme kliknutie na odsek so všetkými z toho vyplývajúcimi dôsledkami.

Takže, problém je načrtnutý. Poďme teraz ho opraviť.

Na to jednoducho pri objavení sa vstupného poľa odpojíme od odseku obslužný program kliknutia. V tomto prípade iba prvé kliknutie na odsek povedie k objaveniu sa vstupného poľa, a ostatné kliknutia, vykonané po objavení sa vstupného poľa, budú ignorované.

Realizujme:

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); // odpojíme udalosť
});

Teraz urobme tak, aby pri objavení sa vstupného poľa, text samotného odseku zmizol. Na to pred vložením vstupného poľa textContent odseku priradíme prázdny reťazec:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // najprv zapíšeme text odseku do vstupného poľa
	elem.textContent = ''; // potom odstránime text odseku
	elem.appendChild(input); // potom vložíme vstupné pole
	
	elem.removeEventListener('click', func);
});

Teraz urobme tak, aby pri strate fokusu vo vstupnom poli sa text tohto vstupného poľa zapísal do odseku:

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šimnite si, že my nemusíme odstraňovať vstupné pole - odstraňuje sa samo, keď zapíše svoj text do odseku: tak ako vstupné pole je súčasťou textu odseku, tak zápis nejakého textu do tohto odseku jednoducho odstráni naše vstupné pole, a to je všetko.

My však máme ešte jeden problém: text odseku sa bude upravovať iba prvý raz. Po prvej úprave opakované stlačenie na text odseku k ničomu nepovedie.

Vec sa má tak, že v okamihu objavenia sa vstupného poľa sme odpojili udalosť od odseku z vyššie opísaných dôvodov. Teraz potrebujeme v okamihu ukončenia úprav pripojiť udalosť späť.

Urobme 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); // pripojíme udalosť späť
	});
	
	elem.removeEventListener('click', func);
});

Samostatne, bez nahliadania do môjho kódu, vyriešte opísanú úlohu.