Teksta paslēpšana, rediģējot elementu JavaScript

Tagad padarīsim tā, lai rediģēšanas laikā input elements parādītos pašā rindkopā - teksta vietā šajā rindkopā. Ļaujiet pēc rediģēšanas pabeigšanas input elements tikt noņemtam, un tā vietā atkal parādītos rindkopas teksts.

Ķersimies pie ieviešanas.

Sākumā padarīsim tā, lai klikšķinot uz rindkopas, tās beigās tiktu pievienots input elements ar šīs rindkopas tekstu:

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

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

Tomēr mūsu kods ir ļoti nepilnīgs - katru reizi, klikšķinot uz rindkopas, tajā tiks pievienots jauns input elements.

Turklāt, ja pirmajā input elementā atradīsies rindkopas teksts, tad otrajā input elementā jau atradīsies rindkopas teksts kopā ar pirmo input elementu, un trešajā input elementā jau atradīsies rindkopas teksts kopā ar diviem input elementiem un tā tālāk.

Ievērojiet arī to, ka klikšķis uz pievienotā input elementa tiks uzskatīts par klikšķi uz rindkopas: lieta ir tāda, ka input elements atrodas rindkopā, un klikšķis uz input elementa vienkārši izplatīsies uz augšu līdz šai rindkopai.

Tas novedīs pie tā, ka pēc pirmā input elementa parādīšanās, mēģinot uz tā noklikšķināt lai sāktu rediģēšanu, mēs automātiski veiksim klikšķi uz rindkopas ar visām no tā izrietošajām sekām.

Tātad, problēma ir aprakstīta. Tagad izlabosim to.

Lai to izdarītu, vienkārši pēc input elementa parādīšanās atvienosim no rindkopas klikšķa apstrādes funkciju. Šajā gadījumā tikai pirmais klikšķis uz rindkopas novedīs pie input elementa parādīšanās, bet pārējie klikšķi, veikti pēc input elementa parādīšanās, tiks ignorēti.

Ieviesīsim:

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); // atvienojam notikumu
});

Tagad padarīsim tā, lai pēc input elementa parādīšanās, pašas rindkopas teksts pazustu. Lai to izdarītu, pirms input elementa ievietošanas textContent rindkopas piešķirsim tukšu virkni:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // vispirms ierakstām rindkopas tekstu input elementā
	elem.textContent = ''; // tad noņemam rindkopas tekstu
	elem.appendChild(input); // tad ievietojam input elementu
	
	elem.removeEventListener('click', func);
});

Tagad padarīsim tā, lai zaudējot fokusu input elementā, šī input elementa teksts ierakstītos rindkopā:

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

Ievērojiet, ka mums nav nepieciešams dzēst input elementu - tas sevi izdzēš, kad ieraksta savu tekstu rindkopā: tā kā input elements ir daļa no rindkopas teksta, tad jebkura teksta ierakstīšana šajā rindkopā vienkārši izdzēš mūsu input elementu, un viss.

Tomēr mums ir vēl viena problēma: rindkopas teksts tiks rediģēts tikai pirmo reizi. Pēc pirmās rediģēšanas atkārtots nospiediens uz rindkopas teksta neko neizraisīs.

Lieta ir tāda, ka input elementa parādīšanās brīdī mēs atvienojām notikumu no rindkopas iepriekš aprakstīto iemeslu dēļ. Tagad mums ir nepieciešams rediģēšanas beigu brīdī atkārtoti pievienot notikumu.

Izdarīsim 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); // atkārtoti pievienojam notikumu
	});
	
	elem.removeEventListener('click', func);
});

Patstāvīgi, neieskatoties manā kodā, atrisiniet aprakstīto uzdevumu.