Menyembunyikan Teks saat Mengedit Elemen dengan JavaScript

Sekarang mari kita buat agar saat mengedit, input muncul di dalam paragraf itu sendiri - menggantikan teks paragraf tersebut. Kemudian, setelah pengeditan selesai, input akan disembunyikan, dan sebagai gantinya teks paragraf akan muncul kembali.

Mari kita mulai implementasinya.

Pertama-tama, mari kita buat agar dengan mengklik paragraf, sebuah input ditambahkan ke akhir paragraf tersebut dengan teks dari paragraf itu:

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

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

Namun, kode kita sangat tidak sempurna - setiap kali paragraf diklik, input baru akan ditambahkan ke dalamnya.

Sementara itu, jika input pertama berisi teks paragraf, maka input kedua akan berisi teks paragraf beserta input pertama, dan input ketiga akan berisi teks paragraf beserta dua input, dan seterusnya.

Perhatikan juga bahwa klik pada input yang ditambahkan akan dianggap sebagai klik pada paragraf: masalahnya adalah input berada di dalam paragraf, dan klik pada input akan membubung (bubble up) ke paragraf tersebut.

Ini akan mengakibatkan, setelah kemunculan input pertama, ketika mencoba mengekliknya untuk mulai mengedit, kita secara otomatis melakukan klik pada paragraf dengan semua konsekuensinya.

Jadi, masalahnya telah digambarkan. Sekarang mari kita perbaiki.

Untuk melakukannya, cukup saat input muncul, lepaskan penangan klik dari paragraf. Dalam hal ini hanya klik pertama pada paragraf yang akan menyebabkan kemuunculan input, dan klik lainnya, yang dilakukan setelah input muncul, akan diabaikan.

Mari kita implementasikan:

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); // lepaskan event
});

Sekarang mari kita buat agar saat input muncul, teks paragraf itu sendiri menghilang. Untuk melakukannya, sebelum menyisipkan input, setel textContent paragraf menjadi string kosong:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // pertama-tama tulis teks paragraf ke input
	elem.textContent = ''; // kemudian hilangkan teks paragraf
	elem.appendChild(input); // kemudian sisipkan input
	
	elem.removeEventListener('click', func);
});

Sekarang mari kita buat agar saat kehilangan fokus di input, teks dari input tersebut ditulis ke dalam paragraf:

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

Perhatikan bahwa kita tidak perlu menghapus input - input menghapus dirinya sendiri ketika menuliskan teksnya ke paragraf: karena input merupakan bagian dari teks paragraf, maka menulis beberapa teks ke paragraf ini secara sederhana menghapus input kita, dan selesai.

Namun, kita masih memiliki satu masalah lagi: teks paragraf hanya akan dapat diedit untuk pertama kalinya. Setelah pengeditan pertama, penekanan ulang pada teks paragraf tidak akan menghasilkan apa-apa.

Masalahnya adalah pada saat kemunculan input kita melepaskan event dari paragraf karena alasan yang dijelaskan di atas. Sekarang kita perlu pada saat pengeditan selesai, untuk memasang event kembali.

Mari kita lakukan ini:

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); // pasang event kembali
	});
	
	elem.removeEventListener('click', func);
});

Secara mandiri, tanpa melihat kode saya, selesaikan masalah yang dijelaskan.