Sakrivamo tekst pri uređivanju elementa u JavaScript-u

Hajde sada da napravimo da se prilikom uređivanja input pojavi u samom pasusu - umesto teksta tog pasusa. Neka se zatim po završetku uređivanja input ukloni, a umesto njega opet pojavi tekst pasusa.

Pređimo na realizaciju.

Za početak hajde da napravimo da se klikom na pasus njemu na kraj doda input sa tekstom tog pasusa:

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

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

Naš kod je, međutim, veoma nesavršen - svaki put klikom na pasus u njega će se dodavati novi input.

Pri tome, ako u prvom inputu bude stajao tekst pasusa, onda će u drugom inputu već stajati tekst pasusa zajedno sa prvim inputom, a u trećem inputu već će stajati tekst pasusa zajedno sa dva inputa i tako dalje.

Obratite takođe pažnju na to da će klik po dodatnom inputu biti tumačen kao klik po pasusu: stvar je u tome što se input nalazi u pasusu, i klik po inputu će jednostavno isplivati naviše do ovog pasusa.

Ovo će dovesti do toga da će nakon pojavljivanja prvog inputa, pri pokušaju da se klikne na njega da bi se započelo uređivanje, mi automatski izvršiti klik po pasusu sa svim iz toga proisteklim posledicama.

Dakle, problem je ocrtan. Hajde sada da ga ispravimo.

Za ovo jednostavno pri pojavi inputa odvežimo sa pasusa obrađivač klika. U ovom slučaju samo prvi klik po pasusu će dovesti do pojave inputa, a ostali klikovi, učinjeni nakon pojave inputa, biće zanemareni.

Realizujmo:

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); // odvežemo događaj
});

Hajde sada da napravimo da pri pojavljivanju inputa, tekst samog pasusa nestane. Za ovo pre umetanja inputa textContent pasusa pridružimo praznom stringu:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // prvo upisujemo tekst pasusa u input
	elem.textContent = ''; // zatim uklanjamo tekst pasusa
	elem.appendChild(input); // zatim umećemo input
	
	elem.removeEventListener('click', func);
});

Hajde sada da napravimo da pri gubitku fokusa u inputu tekst tog inputa bude upisan u pasus:

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

Obratite pažnju na to da nam nije potrebno brisati input - on se sam briše, kada upisuje svoj tekst u pasus: pošto je input deo teksta pasusa, onda upis nekog teksta u ovaj pasus jednostavno briše naš input, i to je sve.

Mi, međutim, imamo još jedan problem: tekst pasusa će se uređivati samo prvi put. Nakon prvog uređivanja ponovno pritiskivanje na tekst pasusa ni do čega neće dovesti.

Stvar je u tome da smo u trenutku pojave inputa odvezali događaj sa pasusa iz opisanih iznad razloga. Sada nam je potrebno u trenutku završetka uređivanja da prikačimo događaj nazad.

Uradimo ovo:

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); // obešimo događaj nazad
	});
	
	elem.removeEventListener('click', func);
});

Samostalno, ne zagledajući se u moj kod, rešite opisan zadatak.