Fshihni tekstin gjatë editimit të elementit në JavaScript

Le të bëjmë që gjatë editimit input të shfaqet brenda paragrafit - në vend të tekstit të këtij paragrafi. Pastaj, kur përfundon editimi, inputi të largohet, dhe në vend të tij përsëri të shfaqet teksti i paragrafit.

Le të fillojmë zbatimin.

Për fillim, le të bëjmë që me klikim në paragraf, në fund të tij të shtohet një input me tekstin e atij paragrafi:

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

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

Kodi ynë, megjithatë, është shumë i papërsosur - çdo herë me klikim në paragraf, në të do të shtohet një input i ri.

Në këtë rast, nëse në inputin e parë do të jetë teksti i paragrafit, atëherë në inputin e dytë tashmë do të jetë teksti i paragrafit së bashku me inputin e parë, dhe në inputin e tretë tashmë do të jetë teksti i paragrafit së bashku me dy inputa, e kështu me radhë.

Vini re gjithashtu se klikimi në inputin e shtuar do të interpretohet si klikim në paragraf: çështja është se inputi ndodhet brenda paragrafit, dhe klikimi në input thjesht do të "bubullojë" lart te ky paragraf.

Kjo do të çojë në faktin se pas shfaqjes së inputit të parë, kur përpiqemi të klikojmë mbi të që të fillojmë editimin, ne automatikisht do të bëjmë një klik në paragraf me të gjitha pasojat që sjell.

Pra, problemi është përshkruar. Tani le ta rregullojmë atë.

Për këtë, thjesht kur shfaqet inputi, le ta shkëputim nga paragrafi përpunuesin e klikimit. Në këtë rast vetëm klikimi i parë në paragraf do të çojë në shfaqjen e inputit, ndërsa klikimet e tjera, të bëra pas shfaqjes së inputit, do të injorohen.

Le ta realizojmë:

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); // shkëputim ngjarjen
});

Tani le të bëjmë që kur shfaqet inputi, teksti i vetë paragrafit të zhduket. Për këtë, përpara futjes së inputit, textContent të paragrafit le t'i caktojmë një varg bosh:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // së pari shkruajmë tekstin e paragrafit në input
	elem.textContent = ''; // pastaj heqim tekstin e paragrafit
	elem.appendChild(input); // pastaj fusim inputin
	
	elem.removeEventListener('click', func);
});

Tani le të bëjmë që kur humbet fokusi në input, teksti i këtij inputi të shkruhet në paragraf:

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

Vini re se ne nuk kemi nevojë të fshijmë inputin - ai e fshin veten, kur shkruan tekstin e tij në paragraf: meqënëse inputi është pjesë e tekstit të paragrafit, shkrimi i ndonjë teksti në këtë paragraf thjesht fshin inputin tonë, dhe kaq.

Megjithatë, ne kemi një problem tjetër: teksti i paragrafit do të editohet vetëm herën e parë. Pas editimit të parë, shtypja e dytë në tekstin e paragrafit nuk do të çojë në asgjë.

Çështja është se në momentin e shfaqjes së inputit ne e shkëputëm ngjarjen nga paragrafi për arsyet e përshkruara më lart. Tani na duhet, në momentin e përfundimit të editimit, ta lidhim ngjarjen përsëri.

Le ta bëjmë këtë:

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); // e lidhim ngjarjen përsëri
	});
	
	elem.removeEventListener('click', func);
});

Në mënyrë të pavarur, pa parë kodin tim, zgjidhni problemin e përshkruar.