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

Өз алдынча, менин кодумга карабастан, сүрөттөлгөн маселени чыгарыңыз.