Pengeditan Elemen Individu dalam JavaScript

Sekarang kita akan belajar mengedit teks elemen menggunakan medan input. Mari kita mulakan dengan perkara mudah dan secara beransur-ansur meningkatkannya.

Jadi, katakan kita diberikan perenggan dan input, yang terletak dalam induk yang sama:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Mari kita buat supaya apabila input kehilangan fokus, teksnya muncul dalam perenggan:

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

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Sekarang mari kita buat supaya apabila halaman dimuat, teks perenggan sudah berada dalam input. Dengan cara ini, kita boleh menggunakan input untuk mengedit teks yang terletak dalam perenggan.

Mari laksanakannya:

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

input.value = elem.textContent; // tulis teks perenggan ke dalam input

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Ubahsuai kod di atas supaya teks perenggan berubah bukan pada kehilangan fokus, tetapi semasa teks dimasukkan ke dalam input.

Kemunculan Input

Sekarang mari kita buat supaya pada mulanya tiada input pada halaman, dan ia muncul apabila diklik pada perenggan. Iaitu, HTML permulaan kami akan kelihatan seperti ini:

<div id="parent">
	<p id="elem">text</p>
</div>

Pertama, mari laksanakan kemunculan input, tanpa pengeditan:

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

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

Dan sekarang mari kita buat supaya apabila input kehilangan fokus, teks perenggan berubah:

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

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

Walau bagaimanapun, kod kami tidak sempurna, kerana setiap klik pada perenggan akan menyebabkan kemunculan input baru.

Untuk menyelesaikan masalah ini, kita hanya perlu memadamkan input semasa apabila ia kehilangan fokus:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // padamkan input
	});
	
	elem.parentElement.appendChild(input);
});

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