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

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

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

<div id="parent">
	<p id="elem">ტექსტი</p>
	<input id="input">
</div>

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

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

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

ახლა მოდით გავაკეთოთ ისე, რომ გვერდზე შესვლისას შეყვანის ველში უკვე იყოს პარაგრაფის ტექსტი. ამ გზით ჩვენ შევძლებთ შეყვანის ველის გამოყენებით პარაგრაფში მდებარე ტექსტის რედაქტირებას.

განვახორციელოთ:

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

input.value = elem.textContent; // ველში ვწერთ პარაგრაფის ტექსტს

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

შეცვალეთ ზემოთ მოცემული კოდი ისე, რომ პარაგრაფის ტექსტი შეიცვალოს არა ფოკუსის დაკარგვისას, არამედ შეყვანის ველში ტექსტის შეყვანისას.

შეყვანის ველის გამოჩენა

ახლა მოდით გავაკეთოთ ისე, რომ თავდაპირველად შეყვანის ველი არ იყოს გვერდზე, არამედ გამოჩნდეს პარაგრაფზე დაწკაპუნებით. ანუ ჩვენი საწყისი HTML ასე გამოიყურება:

<div id="parent">
	<p id="elem">ტექსტი</p>
</div>

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

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

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

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

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

თუმცა, ჩვენი კოდი არასრულყოფილია, რადგან ყოველი პარაგრაფზე დაწკაპუნება გამოიწვევს ახალი შეყვანის ველის გამოჩენას.

პრობლემის მოსაგვარებლად უბრალოდ ფოკუსის დაკარგვისას წავშალოთ მიმდინარე შეყვანის ველი:

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

დამოუკიდებლად, ჩემს კოდში ჩახედვის გარეშე, მოაგვარეთ აღწერილი ამოცანა.