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