JavaScript-de element redaktirilende metni gizlemek

Indi redaktirleme wagtynda input şol abzasynyň içinde — abzasyň metniň ornunda görünsin. Redaktirleme gutarança input aýrylsyn, we onuň ornunda ýene abzasyň metni peýda bolsun.

Görnüşine başlalyň.

Başlangyç üçin, abzasa basylanda onuň ahyryna şol abzasyň metni bilen input goşulýan etmeli:

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

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

Şonda-da, biziň kodymyz örän kämil däl — her gezek abzasa basylanda onuň içine täze input goşular.

Şonda, birinji inputda abzasyň metni durýan bolsa, ikinji inputda eýýäm abzasyň metni birinji input bilen bilelikde bolýar, üçünji inputda eýýäm abzasyň metni iki input bilen bilelikde bolýar we ş.m.

Goşulan inputa basylyşyňam üns beriň abzasa basylyş hökmünde kabul ediler: mesele şonda, ýaly input abzasyň içinde ýerleşýär we inputa basylyş ýönekeýçe ýokaryk, şol abzasa ýaýraýar.

Bu, birinji input peýda bolanyndan soň ony redaktirlemek üçin basmaga synanyşanymyzda ýüze çykýar, biz awtomatiki ýagdaýda abzasa basýarys hem-de netijeleri bilen bilelikde.

Şeýlelik, mesele göz öňüne getirildi. Indi bolsa ony düzeliň.

Bunun üçin input peýda bolanda abzasa baglanşykly basyş işleýjisini aýyryň. Şonda ýalňyz birinji abzasa basylyş inputyň peýda bolmagyna getirer, indi bolsa input peýda bolanyndan soň edilen galan basyşlar, ýadyndan çykaryljak.

Görnüşini amala aşyralyň:

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); // wakany aýyryň
});

Indi input peýda bolanda, abzasyň metni ýitip gider ýaly edeliň. Bunun üçin inputyň goşulmagyndan ozal textContent abzasy boş setire belläň:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // ilki bilen abzasyň metnini inputa ýazyň
	elem.textContent = ''; // soňra abzasyň metnini aýyryň
	elem.appendChild(input); // soňra inputy goşuň
	
	elem.removeEventListener('click', func);
});

Indi inputda fokus ýitirilende şol inputyň metni abzasa ýazylýan ýaly edeliň:

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

Biz inputy aýyrmaly däldigine üns beriň — ol özüni özi aýyrýar, öz metnini abzasa ýazanda: input abzasyň tekstiniň bir bölegi bolşy ýaly, bu abzasa ýazylyşy ýönekeýçe biziň inputymyzy aýyrýar, we hemme zat.

Şonda-da, bizde ýene bir mesele bar: abzasyň metni ýalňyz birinji gezek redaktirlener. Birinji redaktirlemekden soň abzasyň metnine ýene basylyş hiç zat getirmeýär.

Mesele şonda, input peýda bolan pursatda biz ýokarda görkezilen sebäplere görä wakany abzasa baglaşykdan aýyrdyk. Indi biz redaktirleme gutaran pursatda wakany ýene baglamaly.

Buny edeliň:

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); // wakany ýene bir gezek baglaň
	});
	
	elem.removeEventListener('click', func);
});

Özbaşyna, meniň koduma seretmezden, görkezilen meseläni çözüň.