Матнро дар вақти вироиш кардани унсур дар 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);
});

Худ, ба коди ман наменигаред, масалаи зикршударо ҳал кунед.