ซ่อนข้อความขณะแก้ไของค์ประกอบด้วย JavaScript

ตอนนี้ให้เราทำให้เมื่อทำการแก้ไข อินพุตจะปรากฏขึ้นในย่อหน้าดังกล่าว - แทนที่ข้อความ ของย่อหน้านั้น จากนั้นเมื่อการแก้ไขสิ้นสุดลง อินพุตจะถูกนำออก และข้อความ ของย่อหน้าจะปรากฏขึ้นอีกครั้งแทน

เรามาเริ่มลงมือปฏิบัติกัน

เริ่มต้นให้เราทำให้เมื่อ คลิกที่ย่อหน้า อินพุตจะถูกเพิ่มเข้ามาในตอนท้ายของย่อหน้า โดยมีข้อความของย่อหน้านั้น:

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

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

อย่างไรก็ตามโค้ดของเรายังไม่สมบูรณ์แบบ - ทุก ครั้งที่คลิกที่ย่อหน้า อินพุตใหม่จะถูกเพิ่มเข้าไป ในย่อหน้าทุกครั้ง

ในขณะเดียวกัน ถ้าในอินพุตแรกมี ข้อความของย่อหน้า ในอินพุตที่สอง ก็จะมีข้อความของย่อหน้ารวมกับอินพุตแรกอยู่ด้วย และในอินพุตที่สามก็จะมีข้อความของย่อหน้า พร้อมกับอินพุตสองอัน และจะเป็นเช่นนี้ต่อไปเรื่อยๆ

โปรดทราบด้วยว่าการคลิกที่ อินพุตที่เพิ่มเข้ามาจะถูกตีความว่าเป็น การคลิกที่ย่อหน้า: นั่นเป็นเพราะว่าอินพุตอยู่ ในย่อหน้า และการคลิกที่อินพุตจะ bubbling ขึ้นไปยังย่อหน้านี้

สิ่งนี้จะทำให้หลังจากที่ อินพุตแรกปรากฏขึ้น เมื่อพยายามกดที่อินพุตนั้น เพื่อเริ่มการแก้ไข เรา จะทำให้เกิดการคลิกที่ย่อหน้าอัตโนมัติ พร้อมกับ ผลที่ตามมาทั้งหมด

ดังนั้นปัญหาได้ถูกอธิบายแล้ว มาดูกันตอนนี้ว่า จะแก้ไขมันอย่างไร

เพื่อแก้ไขปัญหานี้ เพียงแค่เมื่ออินพุตปรากฏขึ้นให้ถอด ตัวจัดการเหตุการณ์การคลิกออกจากย่อหน้า ในกรณีนี้ เฉพาะการคลิกแรกที่ย่อหน้าจะทำให้เกิด การปรากฏของอินพุต และการคลิกอื่นๆ ที่เกิดขึ้น หลังจากอินพุตปรากฏขึ้น จะถูกละเว้น

มาลองทำดู:

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); // ถอดเหตุการณ์ออก
});

ตอนนี้ให้เราทำให้เมื่อ อินพุตปรากฏขึ้น ข้อความของย่อหน้าจะหายไป ในการทำเช่นนี้ ก่อนแทรกอินพุต textContent ของย่อหน้า ให้กำหนดค่าเป็นสตริงว่าง:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // ก่อนอื่นเขียนข้อความย่อหน้าลงในอินพุต
	elem.textContent = ''; // จากนั้นนำข้อความย่อหน้าออก
	elem.appendChild(input); // จากนั้นแทรกอินพุต
	
	elem.removeEventListener('click', func);
});

ตอนนี้ให้เราทำให้เมื่อสูญเสีย โฟกัสในอินพุต ข้อความของอินพุตนี้จะถูกเขียน ลงในย่อหน้า:

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

โปรดทราบว่าเราไม่จำเป็น ต้องลบอินพุต - มันจะลบตัวเองออกเมื่อ เขียนข้อความของมันลงในย่อหน้า: เนื่องจากอินพุต เป็นส่วนหนึ่งของข้อความย่อหน้า การเขียน ข้อความใดๆ ลงในย่อหน้านี้ก็เพียงแค่ลบ อินพุตของเราออก และนั่นคือทั้งหมด

อย่างไรก็ตามเรายังมีปัญหาอีกอย่างหนึ่ง: ข้อความ ของย่อหน้าจะสามารถแก้ไขได้เพียงแค่ครั้งแรก เท่านั้น หลังจากการแก้ไขครั้งแรก การกด ข้อความย่อหน้าซ้ำอีกครั้งจะไม่ทำให้เกิดอะไรขึ้น

สาเหตุคือในขณะที่อินพุตปรากฏขึ้น เราได้ถอดเหตุการณ์ออกจากย่อหน้า ด้วยเหตุผล ที่อธิบายไว้ด้านบน ตอนนี้เราจำเป็นต้องในขณะที่ การแก้ไขสิ้นสุดลง เพื่อเชื่อมโยงเหตุการณ์ กลับคืน

มาลองทำสิ่งนี้:

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); // เชื่อมโยงเหตุการณ์กลับคืน
	});
	
	elem.removeEventListener('click', func);
});

ด้วยตนเอง โดยไม่แอบดูโค้ดของฉัน จงแก้ไขปัญหาที่อธิบายไว้