Uhariri wa Kipengele Kimoja kwa kutumia JavaScript

Sasa tutajifunza jinsi ya kuhariri maandishi ya vipengele kwa kutumia sehemu za kuingiza. Tutaanza kwa mambo rahisi na kuzidi kuwa tata hatua kwa hatua.

Kwa hiyo, hebu tuchukulie tuna aya na uingizaji, ziko kwenye mzazi mmoja:

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

Hebu tufanye ili kupoteza umakini katika uingizaji maandishi yake yaonekane kwenye aya:

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

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

Hebu sasa tufanye ili kuingia kwenye ukurasa kuingizwa tayari kuna maandishi ya aya. Kwa njia hii tutaweza kwa kutumia uingizaji kuhariri maandishi yaliyo kwenye aya.

Tutatekeleza:

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

input.value = elem.textContent; // tunaandika kwenye uingizaji maandishi ya aya

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

Kuonekana kwa Uingizaji

Hebu sasa tufanye ili uingizaji haupo awali kwenye ukurasa, lakini unaonekana kwa kubonyeza kwenye aya. Yaani HTML yetu ya awali itaonekana kama hii:

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

Kwa kuanza tu tutatekeleza kuonekana kwa uingizaji, bila uhariri:

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

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

Na sasa hebu tufanye ili kupoteza umakini kwenye uingizaji maandishi ya aya ibadilike:

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

Hata hivyo, msimbo wetu haukukamilika, kwani kila kubonyeza kwenye aya kutasababisha kuonekana kwa uingizaji mpya.

Ili kutatua tatizo tu tutaondoa uingizaji wa sasa kupoteza umakini:

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