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