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

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