Teksto paslėpimas redaguojant elementą su JavaScript

Dabar padarykime taip, kad redaguojant input atsirastų pačiame paragrafe - vietoj to paragrafo teksto. Tada baigus redagavimą input turi būti pašalintas, o vietoj jo vėl atsirastų paragrafo tekstas.

Pradėkime įgyvendinti.

Pirmiausia padarykime taip, kad paspaudus ant paragrafo į jo galą būtų pridėtas input su to paragrafo tekstu:

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

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

Tačiau mūsų kodas yra labai netobulas - kiekvieną kartą paspaudus ant paragrafo į jį bus pridedamas naujas input.

Tuo tarpu, jei pirmame inpute bus paragrafo tekstas, tai antrame inpute jau bus paragrafo tekstas kartu su pirmuoju inputu, o trečiame inpute jau bus paragrafo tekstas kartu su dviem inputais ir taip toliau.

Taip pat atkreipkite dėmesį į tai, kad paspaudimas ant pridėto inputo bus vertinamas kaip paspaudimas ant paragrafo: reikalas tas, kad inputas yra paragrafe, ir paspaudimas ant inputo tiesiog perduos įvykį aukščiau, šiam paragrafui.

Tai sukels tai, kad po pirmojo inputo atsiradimo bandant jį paspausti kad pradėtumėte redagavimą, mes automatiškai atliksime paspaudimą ant paragrafo su visomis iš to kylančiomis pasekmėmis.

Taigi, problema apibūdinta. Dabar ją išspręskime.

Norėdami tai padaryti, tiesiog atsiradus inputui atjungsime nuo paragrafo paspaudimo apdorojimą. Tokiu atveju tik pirmas paspaudimas ant paragrafo sukels inputo atsiradimą, o likę paspaudimai, atlikti po inputo atsiradimo, bus ignoruojami.

Įgyvendinkime:

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); // atjungsime įvykį
});

Dabar padarykime taip, kad atsiradus inputui, paties paragrafo tekstas išnyktų. Norėdami tai padaryti prieš įterpiant inputą textContent paragrafo priskirkime tuščiai eilutei:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // pirmiausia įrašome paragrafo tekstą į inputą
	elem.textContent = ''; // tada pašaliname paragrafo tekstą
	elem.appendChild(input); // tada įterpiame inputą
	
	elem.removeEventListener('click', func);
});

Dabar padarykime taip, kad praradus fokusą inpute, to inputo tekstas būtų įrašytas į 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);
});

Atkreipkite dėmesį į tai, kad mums nereikia šalinti inputo - jis išsitrina pats, kai įrašo savo tekstą į paragrafą: kadangi inputas yra paragrafo teksto dalis, tai bet kokio teksto įrašymas į šį paragrafą tiesiog pašalina mūsų inputą, ir viskas.

Tačiau mes turime dar vieną problemą: paragrafo tekstas bus redaguojamas tik pirmą kartą. Po pirmojo redagavimo pakartotinis paspaudimas ant paragrafo teksto nieko nesukels.

Reikalas tas, kad inputui atsirandant mes atjungėme įvykį nuo paragrafo dėl anksčiau aprašytų priežasčių. Dabar mums reikia redagavimo pabaigos momentu prijungti įvykį atgal.

Padarykime tai:

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); // užkelsime įvykį atgal
	});
	
	elem.removeEventListener('click', func);
});

Savarankiškai, nežiūrėdami į mano kodą, išspręskite aprašytą užduotį.