Atskiro elemento redagavimas JavaScript

Dabar išmoksime redaguoti elementų tekstus naudojant įvesties laukus. Pradėsime nuo paprastų dalykų ir palaipsniui sudėtinsime.

Taigi, turime pastraipą ir įvesties lauką, esančius tame pačiame tėviniame elemente:

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

Padarykime taip, kad praradus fokusą įvesties lauke, jo tekstas atsirastų pastraipoje:

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

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

Dabar padarykime taip, kad užėjus puslapį, įvesties lauke jau būtų pastraipos tekstas. Taip mes galėsime naudoti įvesties lauką redaguoti tekstą, esantį pastraipoje.

Įgyvendinkime:

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

input.value = elem.textContent; // įrašome į įvesties lauką pastraipos tekstą

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

Įvesties lauko atsiradimas

Dabar padarykime taip, kad iš pradžių įvesties lauko puslapyje nebūtų, o jis atsirastų paspaudus ant pastraipos. Tai yra, mūsų pradinis HTML atrodys taip:

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

Pirmiausia tiesiog įgyvendinkime įvesties lauko atsiradimą, be redagavimo:

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

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

Dabar padarykime taip, kad praradus fokusą įvesties lauke, pasikeistų pastraipos tekstas:

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

Tačiau mūsų kodas nėra tobulas, nes kiekvienas paspaudimas ant pastraipos sukurs naują įvesties lauką.

Norėdami išspręsti problemą, tiesiog praradus fokusą pašalinsime dabartinį įvesties lauką:

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(); // pašaliname įvesties lauką
  });
  
  elem.parentElement.appendChild(input);
});