Таҳрири як унсур алоҳида дар JavaScript

Акнун мо меомӯзем, ки матнҳои унсурҳоро бо истифода аз майдони вуруд таҳрир кунем. Бо чизҳои содда оғоз мекунем ва ба тадриҷ мураккабтар мекунем.

Пас, бигзор ба мо як абзас ва вуруддиҳанда (input) дода шавад, ки дар як волидайн ҷойгиранд:

html<div id="parent">
  <p id="elem">matn</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">matn</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);
});