ტექსტის დამალვა ელემენტის რედაქტირებისას JavaScript-ში

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

მოდით გადავიდეთ რეალიზაციაზე.

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

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

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

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

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

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

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

მაშ, პრობლემა დაფარდა. მოდით ახლა მოვაგვაროთ იგი.

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

მოდით რეალიზაცია გავუკეთოთ:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
	
	elem.removeEventListener('click', func); // გავათიშოთ მოვლენა
});

ახლა მოდით გავაკეთოთ ისე, რომ ინფუთის გამოჩენისას, თავად აბზაცის ტექსტი გაქრეს. ამისათვის ინფუთის ჩასმამდე textContent აბზაცის მივანიჭოთ ცარიელი სტრიქონი:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // ჯერ აბზაცის ტექსტი ჩავწეროთ ინფუთში
	elem.textContent = ''; // შემდეგ ამოვიღოთ აბზაცის ტექსტი
	elem.appendChild(input); // შემდეგ ჩავსვათ ინფუთი
	
	elem.removeEventListener('click', func);
});

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

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

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

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

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

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

მოდით გავაკეთოთ ეს:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.textContent = '';
	elem.appendChild(input);
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		elem.addEventListener('click', func); // მოვლენა უკან დავამაგროთ
	});
	
	elem.removeEventListener('click', func);
});

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