Առանձին տարրի խմբագրում 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);
});

Ինքնուրույն, առանց իմ կոդին նայելու, լուծեք նկարագրված խնդիրը։