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

Ҳозир биз элементлар матнини киритув майдонлари ёрдамида таҳрирлашни ўрганамиз. Содда нарсалардан бошлаймиз ва аста-секин мураккаблаштирамиз.

Шунинг учун, бизга бир отада жойлашган абзац ва инпут берилган бўлсин:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Инпутда фокус йўқолганида унинг матни абзацда пайдо бўлишини таъминлайлик:

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

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

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

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

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

input.value = elem.textContent; // инпутга абзац матнини ёзамиз

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

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

Инпутнинг пайдо бўлиши

Энди саҳифада инпут бошланғоҳда бўлмаса-да, абзац босилганда пайдо бўлишини таъминлайлик. Яъни бошланғоч HTML шундай кўринишда бўлади:

<div id="parent">
	<p id="elem">text</p>
</div>

Аввало таҳрирлашсиз, фақат инпутнинг пайдо бўлишини амалга оширамиз:

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

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

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

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

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

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

Муаммони ҳал қилиш учун фокус йўқолганида жорий инпутни ўчирамиз:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // инпутни ўчирамиз
	});
	
	elem.parentElement.appendChild(input);
});

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