การแก้ไของค์ประกอบแต่ละรายการด้วย JavaScript

ตอนนี้เราจะเรียนรู้วิธีการแก้ไขข้อความขององค์ประกอบโดยใช้ช่องป้อนข้อมูล เริ่มจากสิ่งง่าย ๆ และค่อย ๆ ทำให้ซับซ้อนขึ้น

ดังนั้น ให้เรามีย่อหน้าและอินพุต ซึ่งอยู่ในพาเรนต์เดียวกัน:

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

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

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

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

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

มาเขียนโค้ดกัน:

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

input.value = elem.textContent; // เขียนข้อความของย่อหน้าลงในอินพุต

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

การปรากฏของอินพุต

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

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

เริ่มต้นมาเขียนโค้ดการปรากฏของอินพุตกันก่อน โดยยังไม่มีการแก้ไข:

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

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

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

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

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

เพื่อแก้ไขปัญหา เราจะลบอินพุตปัจจุบันเมื่อเสียโฟกัส:

javascriptlet 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(); // ลบอินพุต
  });
  
  elem.parentElement.appendChild(input);
});