JavaScript-de aýratyn elementleri redaktirlemek

Indi biz elementleriň tekstlerini girizme meýdanlarynyň kömegi bilen redaktirlemegi öwreneris. Öňem ýönekeý zatlardan başlap, aýratyn derejede kynlaşdyraris.

Şeýlelikde, bize bir ata elementde ýerleşdirilen abzas we girizme meýdany berlen bolsun:

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

Girizme meýdanynda fokus ýitirilende onuň tekstiniň abzada peýda bolmagyny edeliň:

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

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

Indi bolsa sahypa girilende girizme meýdanynda eýýäm abzadyň tekstiniň durmagyny edeliň. Şeýlelikde, biz girizme meýdanynyň kömegi bilen abzada ýerleşdirilen tekstleri redaktirleyeris.

Amala aşyryň:

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

input.value = elem.textContent; // girizme meýdanyna abzadyň tekstini ýazýarys

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

Ýokardaky kody şeýle üýtgediň: abzadyň teksti fokus ýitirilende däl-de, girizme meýdanyna tekst girizilýänçe üýtgän bolsun.

Girizme meýdanynyň peýda bolmagy

Indi bolsa girizme meýdanynyň başda sahypada bolman, diňe abzadyň üstüne basylanyňda peýda bolmagyny edeliň. Ýagny, başlangyç HTML-ymyz şeýle görüner:

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

Başlangyçda diňe girizme meýdanynyň peýda bolmagyny redaktirlemezsiz amala aşyryň:

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

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

Indi bolsa fokus girizme meýdanynda ýitirilende abzadyň tekstiniň üýtgemegini edeliň:

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

Emma kodymyz kemçilikli, sebäbi abzadyň her basylmagy täze bir girizme meýdanynyň peýda bolmagyna getirer.

Bu meseläni çözmek üçin fokus ýitirilende häzirki girizme meýdanyny aýyryň:

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(); // girizme meýdanyny aýyryň
	});
	
	elem.parentElement.appendChild(input);
});

Özbaşdak, meniň koduma serenmezsiz, görkezilen meseläni çöziň.