Скриване на текст при редактиране на елемент с 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);
});

Самостоятелно, без да надничате в моя код, решете описаната задача.