ცალკეული ელემენტის რედაქტირება JavaScript-ში

ახლა ჩვენ ვისწავლით ტექსტის რედაქტირებას ელემენტებში შეყვანის ველების გამოყენებით. დავიწყოთ მარტივი რამეებით და თანდათან გავართულებთ.

მოდით, ჩვენ გვაქვს მოცემული პარაგრაფი და შეყვანის ველი, რომლებიც მდებარეობენ ერთ მშობელში:

html<div id="parent">
  <p id="elem">ტექსტი</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">ტექსტი</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);
});