Таҳрири як унсур алоҳида дар JavaScript

Акнун мо меомӯзем, ки матнҳои унсурҳоро бо истифода аз майдони вуруд таҳрир кунем. Бо чизҳои содда оғоз мекунем ва ба тадриҷ мураккабтар мекунем.

Пас, бигзор ба мо як абзас ва вуруддиҳанда (input) дода шавад, ки дар як волидайн ҷойгиранд:

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

Биёед тавре созем, ки ҳангоми аз даст додани фокус дар вуруддиҳанда, матни он дар абзас пайдо шавад:

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

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

Акнун биёед тавре созем, ки ҳангомаш омадан ба саҳифа дар вуруддиҳанда аллакай матни абзас истода бошад. Бо ин роҳ мо бо истифода аз вуруддиҳанда метавонем матнеро, ки дар абзас ҷойгир аст, таҳрир кунем.

Амалӣ мекунем:

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

input.value = elem.textContent; // матни абзасро ба вуруддиҳанда менависем

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

Коди дар боло овардашударо тавре тағир диҳед, ки матни абзас на ҳангоми аз даст додани фокус, балки ҳангоми вуруд кардани матн ба вуруддиҳанда тағир ёбад.

Падид омадани вуруддиҳанда

Акнун биёед тавре созем, ки дар аввал вуруддиҳанда дар саҳифа набошад, ва он пас аз клик кардан рӯи абзас пайдо шавад. Яъне HTML-и аввалии мо ин тавр хоҳад буд:

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

Барои оғоз танҳо пайдо шудани вуруддиҳандаро амалӣ мекунем, бе таҳрир кардан:

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

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

Ва акнун биёед тавре созем, ки ҳангоми аз даст додани фокус дар вуруддиҳанда, матни абзас тағир ёбад:

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

Аммо коди мо комил нест, зеро ҳар як фишурда ба абзас ба пайдо шудани як вуруддиҳандаи нав оварда расонад.

Барои ҳалли мушкилот танҳо ҳангоми аз даст додани фокус вуруддиҳандаи ҷориро нест мекунем:

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(); // вуруддиҳандаро нест мекунем
	});
	
	elem.parentElement.appendChild(input);
});

Худ, бе назар кардан ба коди ман, машқи тавсифшударо ҳал кунед.