Redaktimi i një elementi të veçantë në JavaScript

Tani do të mësojmë të redaktojmë tekstet e elementeve duke përdorur fushat e inputit. Do të fillojmë me gjëra të thjeshta dhe gradualisht do t'i ndërlikojmë.

Pra, le të themi se kemi një paragraf dhe një input, të vendosur në të njëjtin prind:

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

Le të bëjmë që kur inputi humb fokusin teksti i tij të shfaqet në paragraf:

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

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

Tani le të bëjmë që kur të hyjmë në faqe në input të jetë tashmë teksti i paragrafit. Në këtë mënyrë ne me anë të inputit do të mund të redaktojmë tekstin e vendosur në paragraf.

Le ta implementojmë:

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

input.value = elem.textContent; // shkruajmë në input tekstin e paragrafit

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

Shfaqja e inputit

Tani le të bëjmë që inputi të mos jetë fillimisht në faqe, por të shfaqet në klikim në paragraf. HTML-ja jonë fillestare do të duket kështu:

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

Për fillim le të implementojmë shfaqjen e inputit, pa redaktim:

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

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

Dhe tani le të bëjmë që kur inputi humb fokusin teksti i paragrafit të ndryshojë:

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

Kodi ynë, megjithatë, nuk është i përsosur, pasi çdo klikim në paragraf do të çojë në shfaqjen e një inputi të ri.

Për të zgjidhur problemin thjesht do të bëjmë që pas humbjes së fokusit të fshihet inputi aktual:

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