JavaScriptда элементни таҳрирлашда матнни беркитиш

Энди қилиб кўрайликки, таҳрирлаш жараёнида инпут ўша абзацнинг ўзида пайдо бўлсин - абзац мати ўрнига. Кейин, таҳрирлаш тугаганда, инпут йўқолсин, унинг ўрнига яна абзац мати пайдо бўлсин.

Амалга оширишга киришамиз.

Бошлаш учун, абзац устига босилганда унинг охирига ўша абзац мати билан инпут қўшиладиган қилиб кўрайлик:

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

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

Бирок, бизнинг кодимиз жуда но mukammal - ҳар бора абзац устига босилганда унга янаги инпут қўшилади.

Бунинг натижасида, агар биринчи инпутда абзац мати турган бўлса, иккинчи инпутда аллақачон абзац мати биринчи инпут билан бирга туради, учинчи инпутда эса аллақачон абзац мати иккита инпут билан бирга туради ва ҳоказо.

Шунингдек, қўшилган инпут устига босилганига эътибор беринг: бу абзац устига босилгандек ҳисобланади: ҳақиқатан, инпут абзац ичида жойлашган, ва инпут устига босилш жараёни осонгина юқорига, абзацга кўтарилиб кетади.

Бу шунга олиб келадики, биринчи инпут пайдо бўлганидан кейин уни таҳрирлаш учун босилганда, биз автоматик равишда абзац устига босган бўламиз ва бу ўзи билан боглик бўлган барча оқибатларга олиб келади.

Демак, муаммо аникланди. Энди уни тузатамиз.

Бунинг учун инпут пайдо бўлганида абзацдан клик обработчигини ўчирамиз. Бу ҳолда фақат абзац устига биринчи босилш инпутнинг пайдо бўлишига олиб келади, инпут пайдо бўлганидан кейин амалга оширилган қолган босимлар эса эътиборсиз қолдирилади.

Амалга оширамиз:

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); // событени ўчирамиз
});

Энди шундай қилиб кўрайликки, инпут пайдо бўлганида, абзацнинг ўзининг мати йўқолсин. Бунинг учун инпутни қўшишдан олдин textContent абзацни буш сатрга тенглаштирамиз:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // аввал абзац матини инпутга ёзамиз
	elem.textContent = ''; // кейин абзац матини оламиз
	elem.appendChild(input); // кейин инпутни қўшамиз
	
	elem.removeEventListener('click', func);
});

Энди шундай қилиб кўрайликки, инпутда фокус йўқотилганда ўша инпут мати абзацга ёзилсин:

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

Шуни эътиборга олингки, биз инпутни олиб ташлаш шарт эмас - у ўзининг матини абзацга ёзганда ўзини ўзи ўчириб ташлайди: инпут абзац матининг бир қисми бўлгани сабабли, бирон матнни ўша абзацга ёзиш бизни инпутимизни осонгина ўчириб ташлайди, ва ҳаммаси.

Бирок, бизда яна бир муаммо бор: абзац мати фақат биринчи марта таҳрирланади. Биринчи таҳрирлашдан кейин абзац мати устига яна босилш ҳеч нарсага олиб келмайди.

Бунинг сабаби шуки, инпут пайдо бўлган пайтда биз юқорида баён қилинган сабабларга кўра событени абзацдан ўчирдик. Энди бизга таҳрирлаш тугаган пайтда событени яна боглаш лозим.

Буни амалга оширамиз:

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); // событени яна қўшамиз
	});
	
	elem.removeEventListener('click', func);
});

Мустақил равишда, менинг кодимга қарамай, баён қилинган вазифани ечинг.