Teksti peitmine elemendi redigeerimisel JavaScriptis

Teeme nüüd nii, et redigeerimise ajal ilmub sisestuskast otse lõigu sisse - selle lõigu teksti asemel. Seejärel redigeerimise lõppedes eemaldatakse sisestuskast ja selle asemel ilmub jälle lõigu tekst.

Asume rakendamise kallale.

Alustuseks teeme nii, et lõigule klõpsates lisatakse selle lõppu sisestuskast selle lõigu tekstiga:

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

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

Meie kood on aga väga ebatäiuslik - iga kord lõigule klõpsates lisatakse sellesse uus sisestuskast.

Samuti, kui esimeses sisestuskastis on lõigu tekst, siis teises sisestuskastis on juba lõigu tekst koos esimese sisestuskastiga, kolmandas sisestuskastis on juba lõigu tekst koos kahe sisestuskastiga ja nii edasi.

Pange tähele ka seda, et klõps lisatud sisestuskastile loetakse kui klõpsuks lõigule: asi on selles, et sisestuskast asub lõigus ja klõps sisestuskastile kandub lihtsalt kõrgemale sellele lõigule.

See viib selleni, et pärast esimese sisestuskasti ilmumist katse seda vajutada redigeerimise alustamiseks, me teeme automaatselt klõpsu lõigule koos kõigi kaasnevate tagajärgedega.

Niisiis, probleem on kirjeldatud. Parandame selle nüüd ära.

Selleks lihtsalt sisestuskasti ilmumisel eemaldame lõigult klõpsu töötleja. Sel juhul ainult esimene klõps lõigul põhjustab sisestuskasti ilmumise, ülejäänud klõpsud, mis tehakse pärast sisestuskasti ilmumist, jäetakse ignoreeritakse.

Rakendame:

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); // eemaldame sündmuse
});

Teeme nüüd nii, et sisestuskasti ilmumisel lõigu enda tekst kaoks. Selleks enne sisestuskasti sisestamist määrame lõigu textContent-ile tühja stringi:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // kõigepealt kirjutame lõigu teksti sisestuskasti
	elem.textContent = ''; // seejärel eemaldame lõigu teksti
	elem.appendChild(input); // seejärel sisestame sisestuskasti
	
	elem.removeEventListener('click', func);
});

Teeme nüüd nii, et sisestuskasti fookuse kaotamisel selle sisestuskasti tekst kirjutataks lõigu sisse:

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

Pange tähele, et meil ei ole vaja sisestuskasti kustutada - see kustutab ise ennast, kui kirjutab oma teksti lõiku: kuna sisestuskast on osa lõigu tekstist, siis mõne teksti kirjutamine sellesse lõiku kustutab lihtsalt meie sisestuskasti ära, ja kõik.

Meil on aga veel üks probleem: lõigu tekst redigeeritakse ainult esimest korda. Pärast esimest redigeerimist teine vajutus lõigu teksti peale ei vii midagi kaasa.

Asi on selles, et sisestuskasti ilmumise hetkel eemaldasime me sündmuse lõigult ülalkirjeldatud põhjustel. Nüüd peame me redigeerimise lõppemise hetkel sündmuse tagasi siduma.

Teeme selle:

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); // sidume sündmuse tagasi
	});
	
	elem.removeEventListener('click', func);
});

Iseenesesiselt, minu koodi peale vahtimata, lahendage kirjeldatud ülesanne.