Редактиране на отделен елемент в 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);
});