Atskiro elemento redagavimas JavaScript

Dabar išmoksime redaguoti elementų tekstus naudojant įvesties laukus. Pradėsime nuo paprastų dalykų ir palaipsniui sudėtinsime.

Taigi, turime pastraipą ir įvesties lauką, esančius tame pačiame tėviniame elemente:

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

Padarykime taip, kad praradus fokusą įvesties lauke, jo tekstas atsirastų pastraipoje:

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

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

Dabar padarykime taip, kad užėjus puslapį, įvesties lauke jau būtų pastraipos tekstas. Taip mes galėsime naudoti įvesties lauką redaguoti tekstą, esantį pastraipoje.

Įgyvendinkime:

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

input.value = elem.textContent; // įrašome į įvesties lauką pastraipos tekstą

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

Modifikuokite aukščiau pateiktą kodą taip, kad pastraipos tekstas keistųsi ne praradus fokusą, o vestant tekstą į įvesties lauką.

Įvesties lauko atsiradimas

Dabar padarykime taip, kad iš pradžių įvesties lauko puslapyje nebūtų, o jis atsirastų paspaudus ant pastraipos. Tai yra, mūsų pradinis HTML atrodys taip:

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

Pirmiausia tiesiog įgyvendinkime įvesties lauko atsiradimą, be redagavimo:

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

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

Dabar padarykime taip, kad praradus fokusą įvesties lauke, pasikeistų pastraipos tekstas:

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

Tačiau mūsų kodas nėra tobulas, nes kiekvienas paspaudimas ant pastraipos sukurs naują įvesties lauką.

Norėdami išspręsti problemą, tiesiog praradus fokusą pašalinsime dabartinį įvesties lauką:

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(); // pašaliname įvesties lauką
	});
	
	elem.parentElement.appendChild(input);
});

Savarankiškai, nežiūrėdami į mano kodą, išspręskite aprašytą užduotį.