Хаваем тэкст пры рэдагаванні элемента на 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);
});

Самастойна, не падглядваючы ў мой код, вырашыце апісаную задачу.