JavaScriptda alohida elementni tahrirlash

Hozir biz elementlar matnlarini kirish maydonchalari yordamida tahrirlashni o'rganamiz. Oddiy narsalardan boshlaymiz va asta-sekin murakkablashtiramiz.

Shunday qilib, faraz qilaylik, bizda bir ota-ona ichida joylashgan abzas va kirish maydonchasi berilgan:

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

Keling, kirish maydonchasida fokus yo'qolganida uning matni abzada paydo bo'lishini ta'minlaylik:

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

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

Keling, endi sahifaga kirish bilan kirish maydonchasida abzas matni allaqachon turishini ta'minlaylik. Shu tarzda biz kirish maydonchasi yordamida abzada joylashgan matnni tahrirlashimiz mumkin bo'ladi.

Amalga oshiramiz:

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

input.value = elem.textContent; // kirish maydonchasiga abzas matnini yozamiz

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

Yuqoridagi kodni shunday o'zgartiringki, abzas matni fokus yo'qolishi bilan emas, balki kirish maydonchasiga matn kiritish jarayonida o'zgarishi kerak.

Kirish maydonchasining paydo bo'lishi

Keling, endi shunday qilaylikki, dastlab sahifada kirish maydonchasi bo'lmasin, u abzas ustiga bosilganda paydo bo'lsin. Ya'ni bizning boshlang'ich HTML shunday ko'rinishga ega bo'ladi:

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

Boshlash uchun oddiygina kirish maydonchasining paydo bo'lishini, tahrirlashsiz amalga oshiramiz:

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

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

Keling, endi shunday qilaylikki, kirish maydonchasida fokus yo'qolganida abzas matni o'zgaradi:

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

Biroq, bizning kodimiz mukammal emas, chunki har bir abzas ustiga bosish yangi kirish maydonchasining paydo bo'lishiga olib keladi.

Muammoni hal qilish uchun fokus yo'qolganida joriy kirish maydonchasini oddiygina o'chiramiz:

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(); // kirish maydonchasini o'chiramiz
	});
	
	elem.parentElement.appendChild(input);
});

Mustaqil ravishda, mening kodimga qaramay, tavsiflangan muammoni yeching.