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:

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

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

javascriptlet 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:

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

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:

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

Pertama, mari laksanakan kemunculan input, tanpa pengeditan:

javascriptlet 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:

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

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:

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(); // padamkan input
  });
  
  elem.parentElement.appendChild(input);
});