Сакривање текста приликом уређивања елемента у ЈаваСкрипту

Хајде сада да направимо тако да приликом уређивања унос поље (инпут) буде приказано у самом пасусу - уместо текста тог пасуса. Нека онда при завршетку уређивања унос поље буде уклоњено, а уместо њега поново буде приказан текст пасуса.

Приступимо имплементацији.

За почетак хајде да направимо тако да при клику на пасус на његов крај буде додато унос поље са текстом тог пасуса:

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

Хајде сада да направимо тако да при губитку focus-a (фокуса) у унос пољу текст тог унос поља буде записан у пасус:

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

Самостално, не подсмеравајући се у мој код, решите описани задатак.