Uhariri wa Kipengele Kimoja kwa kutumia JavaScript

Sasa tutajifunza jinsi ya kuhariri maandishi ya vipengele kwa kutumia sehemu za kuingiza. Tutaanza kwa mambo rahisi na kuzidi kuwa tata hatua kwa hatua.

Kwa hiyo, hebu tuchukulie tuna aya na uingizaji, ziko kwenye mzazi mmoja:

<div id="parent">
	<p id="elem">maandishi</p>
	<input id="input">
</div>

Hebu tufanye ili kupoteza umakini katika uingizaji maandishi yake yaonekane kwenye aya:

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

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Hebu sasa tufanye ili kuingia kwenye ukurasa kuingizwa tayari kuna maandishi ya aya. Kwa njia hii tutaweza kwa kutumia uingizaji kuhariri maandishi yaliyo kwenye aya.

Tutatekeleza:

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

input.value = elem.textContent; // tunaandika kwenye uingizaji maandishi ya aya

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Badilisha msimbo ulio hapo juu ili maandishi ya aya yabadilike si kupoteza umakini, lakini kadiri maandishi yanavyoingizwa kwenye uingizaji.

Kuonekana kwa Uingizaji

Hebu sasa tufanye ili uingizaji haupo awali kwenye ukurasa, lakini unaonekana kwa kubonyeza kwenye aya. Yaani HTML yetu ya awali itaonekana kama hii:

<div id="parent">
	<p id="elem">maandishi</p>
</div>

Kwa kuanza tu tutatekeleza kuonekana kwa uingizaji, bila uhariri:

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

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

Na sasa hebu tufanye ili kupoteza umakini kwenye uingizaji maandishi ya aya ibadilike:

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

Hata hivyo, msimbo wetu haukukamilika, kwani kila kubonyeza kwenye aya kutasababisha kuonekana kwa uingizaji mpya.

Ili kutatua tatizo tu tutaondoa uingizaji wa sasa kupoteza umakini:

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(); // tunaondoa uingizaji
	});
	
	elem.parentElement.appendChild(input);
});

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