Kuficha Maandishi Wakati wa Kuhariri Kipengele kwa JavaScript

Hebu sasa tufanye ili wakati wa kuhariri utiingizwe ndani ya aya yenyewe - badala ya maandishi ya aya hiyo. Na baadaye, wakati kuhariri kumalizika utiondolewe, na badala yake tena yaonekane maandishi ya aya.

Tuanze kutekeleza.

Kwanza, hebu tufanye ili kubofya kwenye aya kiingize uti mwishoni mwake na maandishi ya aya hiyo:

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

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

Hata hivyo, msimbo wetu haukukamilika - kila marera kwa kubofya kwenye aya utaongezewa uti mpya.

Wakati huo huo, ikiwa kwenye uti wa kwanza kutakuwa na maandishi ya aya, basi kwenye uti wa pili tayari kutakuwa na maandishi ya aya pamoja na uti wa kwanza, na kwenye uti wa tatu tayari kutakuwa na maandishi ya aya pamoja na uti mbili na kadhalika.

Pia makini na kwamba kubofya uti ulioongezwa kutaachwa kama kubofya kwenye aya: jambo ni kwamba uti uko ndani ya aya, na kubofya kwenye uti kutapita tu hadi juu kwa aya hii.

Hii itasababisha kwamba baada ya kuonekana kwa uti wa kwanza wakati wa kujaribu kuubonyeza ili kuanza kuhariri, sisi automatically tutafanya kubofya kwenye aya na matokeo yake yote.

Kwa hivyo, tatizo limebainika. Hebu sasa tulirekebishe.

Ili kufanya hivyo, wakati uti unapoonekana tuachane kificho cha kubofya kutoka kwa aya. Katika kesi hii bofya la kwanza tu kwenye aya litasababisha kuonekana kwa uti, na mabofya mengine, yaliyofanywa baada ya kuonekana kwa uti, yatapuuzwa.

Tutekeleze:

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); // tuachane na tukio
});

Hebu sasa tufanye ili wakati uti unapoonekana, maandishi ya aya yenyewe yipotee. Ili kufanya hivyo kabla ya kuingiza uti textContent ya aya tuwe mstari tupu:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // kwanza andika maandishi ya aya kwenye uti
	elem.textContent = ''; // kisha ondoa maandishi ya aya
	elem.appendChild(input); // kisha ingiza uti
	
	elem.removeEventListener('click', func);
});

Hebu sasa tufanye ili wakati upotezaji wa lengo kwenye uti maandishi ya uti huu yaandikwe kwenye aya:

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

Makini na kwamba hatuitaji kuondoa uti - hujiondoa mwenyewe, wakati unaandika maandishi yake kwenye aya: kwa kuwa uti ni sehemu ya maandishi ya aya, basi kuandika maandishi fulani kwenye aya hii huondoa tu uti wetu, na hivyo basi.

Hata hivyo, tuna shida nyingine: maandishi ya aya yatahaririwa tu mara ya kwanza. Baada ya kuhariri kwa mara ya kwanza, kubonyeza tena kwenye maandishi ya aya hakitoe lolote.

Jambo ni kwamba wakati wa kuonekana kwa uti tuliacha tukio kutoka kwa aya kwa sababu zilizoainishwa hapo juu. Sasa inahitajika wakati wa kumaliza kuhariri kuweka tukio tena.

Tufanye hivi:

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); // tuweke tukio tena
	});
	
	elem.removeEventListener('click', func);
});

Wewe mwenyewe, bila kuangalia kwenye msimbo wangu, tatua tatizo lililoelezewa.