JavaScriptda elementni tahrirlashda matnni yashirish

Endi shunday qilaylikki, tahrirlash paytida input o‘zi abzasning o‘zida paydo bo‘lsin - bu abzas matni o‘rniga. Keyin tahrirlash tugagach, input olib tashlansin va uning o‘rniga yana abzas matni paydo bo‘lsin.

Keling, amalga oshirishni boshlaylik.

Boshlash uchun, keling, shunday qilaylikki, abzas ustiga bosilganda uning oxiriga input qo‘shilsin ushbu abzas matni bilan:

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

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

Biroq, bizning kodimiz juda nomukammal - har safari abzas ustiga bosilganda unga yangi input qo‘shiladi.

Bunda, agar birinchi inputda abzas matni turgan bo‘lsa, ikkinchi inputda allaqachon abzas matni birinchi input bilan birga bo‘ladi, uchinchi inputda esa abzas matni ikki input bilan birga bo‘ladi va hokazo.

Shuningdek, qo‘shilgan input ustiga bosish abzas ustiga bosish deb hisoblanishinga e'tibor bering: gap shundaki, input abzas ichida joylashgan va input ustiga bosish shunchaki yuqoriga, ushbu abzasga ko‘tariladi (bubble up).

Bu shunday natijaga olib keladiki, birinchi input paydo bo‘lgandan so‘ng, uni bosishga urinish (tahrirlashni boshlash uchun), biz avtomatik ravishda abzas ustiga bosamiz va bu barcha kelib chiqadigan oqibatlarga olib keladi.

Xo‘sh, muammo ko‘rsatib berildi. Keling, endi uni tuzatamiz.

Buning uchun shunchaki, input paydo bo‘lganda, abzasdan click hodisasi ishlovchisini (event listener) olib tashlaymiz. Bu holatda faqat abzasdagi birinchi bosish input paydo bo‘lishiga olib keladi, input paydo bo‘lgandan keyin qilingan qolgan bosishlar esa e'tiborga olinmaydi.

Keling, amalga oshiramiz:

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); // hodisani olib tashlaymiz
});

Keling, endi shunday qilaylikki, input paydo bo‘lganda, abzasning o‘z matni yo‘qolsin. Buning uchun inputni kiritishdan oldin abzasning textContent qiymatini bo‘sh satrga tenglaymiz:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // avval abzas matnini inputga yozamiz
	elem.textContent = ''; // keyin abzas matnini olib tashlaymiz
	elem.appendChild(input); // keyin inputni kiritamiz
	
	elem.removeEventListener('click', func);
});

Keling, endi shunday qilaylikki, inputda fokus yo‘qolganida (inputdan chiqilganda), ushbu input matni abzasga yozilsin:

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

E'tibor bering, biz inputni o‘chirishimiz shart emas - u o‘z matnini abzasga yozganda o‘zi o‘chib ketadi: chunki input abzas matnining bir qismi bo‘lgani uchun, abzasga boshqa matn yozish shunchaki bizning inputni o‘chiradi va hammasi.

Biroq, yana bir muammomiz bor: abzas matni faqat birinchi marta tahrirlanadi. Birinchi tahrirlashdan keyin, abzas matni ustiga ikkinchi marta bosish hech narsaga olib kelmaydi.

Gap shundaki, input paydo bo‘lgan paytda biz yuqorida sabablari tushuntirilganidek, hodisani abzasdan olib tashladik. Endi biz tahrirlash tugaganda hodisani qayta bog‘lashimiz kerak.

Buni amalga oshiramiz:

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); // hodisani qayta bog'laymiz
	});
	
	elem.removeEventListener('click', func);
});

Mustaqil ravishda, mening kodimga qaramay, ta'riflangan masalani yeching.