Menyembunyikan Teks Semasa Mengedit Elemen dalam JavaScript

Sekarang mari kita buat supaya semasa pengeditan, input muncul dalam perenggan itu sendiri - menggantikan teks perenggan tersebut. Kemudian, apabila pengeditan selesai, input akan disingkirkan, dan teks perenggan akan muncul semula.

Mari kita mulakan pelaksanaannya.

Sebagai permulaan, mari kita buat supaya dengan mengklik pada perenggan, input ditambahkan pada penghujungnya dengan teks perenggan tersebut:

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

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

Kod kami, bagaimanapun, sangat tidak sempurna - setiap kali perenggan diklik, input baru akan ditambahkan ke dalamnya.

Pada masa yang sama, jika input pertama mengandungi teks perenggan, maka input kedua akan mengandungi teks perenggan bersama-sama dengan input pertama, dan input ketiga akan mengandungi teks perenggan bersama-sama dengan dua input dan seterusnya.

Sila juga perhatikan bahawa klik pada input yang ditambahkan akan dianggap sebagai klik pada perenggan: ini kerana input berada dalam perenggan, dan klik pada input hanya akan menggelembung (bubble up) kepada perenggan ini.

Ini akan menyebabkan selepas kemunculan input pertama, apabila cuba mengklik padanya untuk mula mengedit, kita secara automatik membuat klik pada perenggan dengan semua akibat yang berikutnya.

Jadi, masalah telah digambarkan. Sekarang mari kita perbaikinya.

Untuk melakukan ini, semasa input muncul, lepaskan pengendali klik dari perenggan. Dalam kes ini hanya klik pertama pada perenggan akan menyebabkan kemunculan input, dan klik lain, dilakukan selepas input muncul, akan diabaikan.

Mari laksanakannya:

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 supaya apabila input muncul, teks perenggan itu sendiri hilang. Untuk melakukan ini, sebelum memasukkan input, tetapkan textContent perenggan kepada string kosong:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // mula-mula tulis teks perenggan ke dalam input
	elem.textContent = ''; // kemudian singkirkan teks perenggan
	elem.appendChild(input); // kemudian masukkan input
	
	elem.removeEventListener('click', func);
});

Sekarang mari kita buat supaya apabila kehilangan fokus dalam input, teks input tersebut ditulis ke dalam perenggan:

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 bahawa kita tidak perlu memadamkan input - ia memadamkan sendiri apabila menulis teksnya ke dalam perenggan: kerana input adalah sebahagian daripada teks perenggan, maka menulis beberapa teks ke dalam perenggan ini hanya memadamkan input kami, dan itu sahaja.

Walau bagaimanapun, kita mempunyai satu lagi masalah: teks perenggan hanya akan disunting untuk kali pertama. Selepas suntingan pertama, klik pada teks perenggan sekali lagi tidak akan menghasilkan apa-apa.

Ini kerana pada saat kemunculan input kita melepaskan event dari perenggan atas sebab-sebab yang dinyatakan di atas. Sekarang kita perlu pada saat pengeditan selesai melekatkan event semula.

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

Secara berdikari, tanpa mengintip kod saya, selesaikan masalah yang diterangkan.