Atsevišķa elementa rediģēšana JavaScript

Tagad mēs iemācīsimies rediģēt elementu tekstus izmantojot ievades laukus. Sāksim ar vienkāršām lietām un pakāpeniski sarežģīsim.

Tātad, pieņemsim, ka mums ir dots rindkopa un ievades lauks, kas atrodas vienā un tajā pašā vecākelementā:

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

Izveidosim tā, lai, zaudējot fokusu ievades laukā, tā teksts parādītos rindkopā:

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

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

Tagad izveidosim tā, lai ielāpojot lapā, ievades laukā jau atrastos rindkopas teksts. Tādā veidā mēs ar ievades lauka palīdzību varēsim rediģēt rindkopā esošo tekstu.

Realizēsim:

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

input.value = elem.textContent; // ierakstām ievades laukā rindkopas tekstu

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

Modificējiet iepriekš minēto kodu tā, lai rindkopas teksts mainītos nevis zaudējot fokusu, bet gan ievadot tekstu ievades laukā.

Ievades lauka parādīšanās

Tagad izveidosim tā, lai ievades lauka sākotnēji lapā nebūtu, bet tas parādītos noklikšķinot uz rindkopas. Tas ir, mūsu sākotnējais HTML izskatīsies šādi:

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

Sākumā vienkārši realizēsim ievades lauka parādīšanos, bez rediģēšanas iespējas:

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

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

Un tagad izveidosim tā, lai, zaudējot fokusu ievades laukā, mainītos rindkopas teksts:

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

Tomēr mūsu kods nav ideāls, jo katrs noklikšķis uz rindkopas radīs jauna ievades lauka parādīšanos.

Lai atrisinātu problēmu, vienkārši, zaudējot fokusu, izdzēsīsim pašreizējo ievades lauku:

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(); // izdzēšam ievades lauku
	});
	
	elem.parentElement.appendChild(input);
});

Patstāvīgi, neieskatoties manā kodā, atrisiniet aprakstīto uzdevumu.