JavaScript'te Eleman Düzenleme Sırasında Metni Gizleme

Şimdi, düzenleme sırasında input'un paragrafın içinde - bu paragrafın metni yerine - görünmesini sağlayalım. Düzenleme bittiğinde input'un kalkmasını ve onun yerine yine paragraf metninin görünmesini sağlayalım.

Uygulamaya başlayalım.

Başlangıç olarak, bir paragrafa tıklandığında içine bu paragrafın metniyle bir input eklensin:

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

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

Ancak kodumuz çok kusurlu - her seferinde paragrafa tıklandığında içine yeni bir input eklenecek.

Bu durumda, eğer ilk inputta paragrafın metni duruyorsa, ikinci inputta artık paragrafın metni ve ilk input birlikte olacak, üçüncü inputta ise artık paragrafın metni iki inputla birlikte olacak ve bu böyle devam edecek.

Ayrıca, eklenen inputa yapılan tıklamanın paragrafa yapılan bir tıklama olarak değerlendirileceğine dikkat edin: çünkü input paragrafın içinde bulunuyor ve inputa tıklama olayı basitçe yukarıya, bu paragrafa doğru kabaracak (bubble).

Bu, ilk input göründükten sonra düzenlemeye başlamak için ona tıklamaya çalıştığımızda, otomatik olarak paragrafa tıklamış olacağımız ve bunun sonucunda ortaya çıkacak tüm sonuçlara yol açacaktır.

Evet, sorun tanımlandı. Şimdi düzeltelim.

Bunun için, input göründüğünde paragraftan tıklama işleyicisini bağlamayı kaldıralım. Bu durumda sadece paragrafa yapılan ilk tıklama inputun görünmesine yol açacak, input göründükten sonra yapılan diğer tıklamalar ise göz ardı edilecektir.

Uygulayalım:

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); // olayı bağlamayı kaldır
});

Şimdi, input göründüğünde, paragrafın kendi metninin kaybolmasını sağlayalım. Bunun için input'u eklemeden önce paragrafın textContent'ini boş bir stringe eşitleyelim:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // önce paragrafın metnini inputa yaz
	elem.textContent = ''; // sonra paragrafın metnini kaldır
	elem.appendChild(input); // sonra inputu ekle
	
	elem.removeEventListener('click', func);
});

Şimdi, inputta odak kaybedildiğinde bu inputun metninin paragrafa yazılmasını sağlayalım:

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

Dikkat edin, inputu silmemize gerek yok - kendi metnini paragrafa yazdığında kendiliğinden siliniyor: çünkü input paragrafın metninin bir parçası olduğundan, bu paragrafa herhangi bir metin yazmak bizim inputumuzu siler, hepsi bu.

Ancak başka bir sorunumuz var: paragrafın metni sadece ilk sefer düzenlenebilecek. İlk düzenlemeden sonra paragraf metnine tekrar tıklamak hiçbir şeye yol açmayacak.

Çünkü, input göründüğü anda yukarıda açıklanan nedenlerle olayı paragraftan bağlamayı kaldırdık. Şimdi, düzenlemenin bitiş anında olayı tekrar bağlamamız gerekiyor.

Bunu yapalım:

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); // olayı tekrar bağla
	});
	
	elem.removeEventListener('click', func);
});

Kendi başınıza, benim koduma bakmadan, açıklanan sorunu çözün.