Elementin redaktə edilməsi zamanı mətni gizlətmək JavaScript-də

Gəlin indi elə edək ki, redaktə zamanı input özü abzasın daxilində - həmin abzasın mətni əvəzinə peyda olsun. Qoy sonra redaktə bitdikdə input yox olsun, onun əvəzində isə yenidən abzasın mətni peyda olsun.

Gəlin realizasiyaya başlayaq.

Başlamaq üçün gəlin elə edək ki, abzasa kliklənəndə onun sonuna input əlavə olunsun və həmin inputda abzasın mətni yazılsın:

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

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

Lakin bizim kod çox qüsursuz deyil - hər dəfə abzasa kliklənəndə ona yeni input əlavə olunacaq.

Eyni zamanda, əgər birinci inputda abzasın mətni olarsa, ikinci inputda artıq abzasın mətni ilə birlikdə birinci inputun mətni olacaq, üçüncü inputda isə artıq abzasın mətni ilə birlikdə iki inputun mətni olacaq və belə davam edəcək.

Həmçinin diqqət edin ki, əlavə olunmuş inputa edilən klik abzasa edilən klik kimi qiymətləndiriləcək: ona görə ki, input abzasın daxilindədir və inputa edilən klik sadəcə yuxarıya doğru abzasa qalxacaq (bubble).

Bu ona səbəb olacaq ki, birinci input peyda olduqdan sonra onu redaktə etmək üçün üzərinə kliklədiyimiz zaman biz avtomatik olaraq abzasa klik etmiş olacıq və bununla bağlı bütün nəticələr yaranacaq.

Beləliklə, problem təsvir edildi. Gəlin indi onu düzəldək.

Bunun üçün sadəcə input peyda olanda abzasdan klik hadisəsinin handlerını çıxaraq. Bu halda ancaq birinci klik abzasa inputun peyda olmasına səbəb olacaq, input peyda olduqdan sonra edilən digər kliklər isə laqeyd qalınacaq.

Gəlin realizasiya edək:

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); // hadisəni çıxarırıq
});

Gəlin indi elə edək ki, input peyda olanda, abzasın öz mətni yox olsun. Bunun üçün input əlavə etməzdən əvvəl abzasın textContent xassəsini boş sətirə bərabər edək:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // əvvəlcə abzasın mətni inputa yazılır
	elem.textContent = ''; // sonra abzasın mətni yox olur
	elem.appendChild(input); // sonra input daxil edilir
	
	elem.removeEventListener('click', func);
});

Gəlin indi elə edək ki, input fokusu itirdikdə həmin inputun mətni abzasa yazılsın:

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

Diqqət edin ki, bizim inputu silməyə ehtiyac yoxdur - o özü-özünü silir, çünki öz mətnini abzasa yazanda: input abzasın mətminin bir hissəsi olduğu üçün, hər hansı bir mətnin abzasa yazılması sadəcə bizim inputu silir və hamısı budur.

Lakin bizim başqa bir problemimiz var: abzasın mətni ancak birinci dəfə redaktə olunacaq. Birinci redaktədən sonra abzasın mətninə təkrar klikləmək heç nəyə səbəb olmayacaq.

Səbəb odur ki, input peyda olan anda biz yuxarıda göstərilən səbəblərə görə hadisəni abzasdan çıxardıq. İndi bizim redaktənin bitmə anında hadisəni geri qaytarmağa ehtiyacımız var.

Gəlin bunu edək:

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); // hadisəni geri qaytarırıq
	});
	
	elem.removeEventListener('click', func);
});

Müstəqil olaraq, mənim koduma baxmadan, təsvir olunan məsələni həll edin.