JavaScript арқылы жеке элементті өңдеу

Қазір біз элементтер мәтінін енгізу өрістері арқылы өңдеуді үйренеміз. Қарапайым нәрселерден бастап, барынша қиындата түсеміз.

Сонымен, бізде бір ата-анада орналасқан абзац және енгізу өрісі бар делік:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Енгізу өрісінде фокус жоғалған кезде оның мәтіні абзацта пайда болатындай етейік:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Енді бетке кірген кезде енгізу өрісінде абзацтың мәтіні тұрғандай етейік. Осылайша біз енгізу өрісінің көмегімен абзацта орналасқан мәтінді өңдей аламыз.

Жүзеге асырайық:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // енгізу өрісіне абзац мәтінін жазамыз

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Жоғарыда келтірілген кодты фокус жоғалту арқылы емес, енгізу өрісіне мәтін енгізу барысында абзац мәтіні өзгеретіндей етіп өзгертіңіз.

Енгізу өрісінің пайда болуы

Енді бастапқыда бетте енгізу өрісі болмай, ол абзацты басқан кезде пайда болатындай етейік. Яғни біздің бастапқы HTML келесідей болады:

<div id="parent">
	<p id="elem">text</p>
</div>

Алдымен тек өңдеусіз енгізу өрісінің пайда болуын жүзеге асырайық:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(input);
});

Енді енгізу өрісінде фокус жоғалған кезде абзац мәтіні өзгеретіндік етейік:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

Алайда, біздің код жетілмеген, себебі әрбір абзацты басу жаңа енгізу өрісінің пайда болуына әкеледі.

Мәселені шешу үшін фокус жоғалған кезде ағымдағы енгізу өрісін жойып жіберейік:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // енгізу өрісін жоямыз
	});
	
	elem.parentElement.appendChild(input);
});

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