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

Өздігіңізше, менің кодқа қарамастан, сипатталған мәселені шешіңіз.