Redigering af individuelle elementer i JavaScript

Nu vil vi lære at redigere tekster elementer ved hjælp af inputfelter. Lad os starte med enkle ting og gradvist gøre det mere komplekst.

Så lad os sige, at vi har et afsnit og et input, placeret i samme forælder:

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

Lad os gøre det sådan, at når inputfeltet mister fokus, vises dets tekst i afsnittet:

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

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

Lad os nu gøre det sådan, at når siden indlæses, står afsnittets tekst allerede i inputfeltet. På denne måde kan vi ved hjælp af inputfeltet redigere teksten placeret i afsnittet.

Lad os implementere:

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

input.value = elem.textContent; // skriv afsnittets tekst til inputfeltet

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

Inputfeltets fremtoning

Lad os nu gøre det sådan, at inputfeltet initialt ikke er på siden, men det vises ved klik på afsnittet. Det vil sige, vores start- HTML vil se sådan ud:

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

Lad os først bare implementere visning af inputfeltet, uden redigering:

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

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

Og lad os nu gøre det sådan, at når inputfeltet mister fokus, ændres afsnittets tekst:

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

Vores kode er dog ikke perfekt, da hvert klik på afsnittet vil føre til fremtoning af et nyt inputfelt.

For at løse problemet, lad os simpelthen, når inputfeltet mister fokus, fjerne det aktuelle inputfelt:

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