Տեքստը թաքցնել տարրը 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);
});

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