Piilotetaan teksti elementtiä muokatessa JavaScriptillä

Tehdään nyt niin, että muokkauksen aikana input-kenttä ilmestyy itse kappaleen sisään - tekstin tilalle tässä kappaleessa. Olkoon sitten muokkauksen päätyttyä input-kenttä poistuu, ja sen tilalle ilmestyy taas kappaleen teksti.

Ryhdytään toteuttamaan.

Aluksi tehdään niin, että klikatessa kappaletta sen loppuun lisätään input-kenttä tämän kappaleen tekstillä:

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

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

Koodimme on kuitenkin erittäin epätäydellinen - joka kerta kun kappaleeseen klikataan, siihen lisätään uusi input-kenttä.

Samaan aikaan, jos ensimmäisessä input-kentässä on kappaleen teksti, niin toisessa input-kentässä on jo kappaleen teksti yhdessä ensimmäisen input-kentän kanssa, ja kolmannessa input-kentässä on jo kappaleen teksti yhdessä kahden input-kentän kanssa ja niin edelleen.

Huomaa myös, että klikatessa lisättyyn input-kenttään se tulkitaan kappaleeseen klikkaamiseksi: asiassa on kyse siitä, että input-kenttä sijaitsee kappaleessa, ja klikkaus input-kenttään yksinkertaisesti kupluu ylös tähän kappaleeseen.

Tämä johtaa siihen, että ensimmäisen input-kentän ilmestyttyä yrityksessä painaa sitä aloittaaksesi muokkaamisen, me teemme automaattisesti klikkauksen kappaleeseen kaikkine seuraamuksineen.

Niin, ongelma on hahmoteltu. Korjataan nyt se.

Tätä varten yksinkertaisesti input-kentän ilmestyessä irrotetaan kappaleesta klikkauksen käsittelijä. Tässä tapauksessa vain ensimmäinen klikkaus kappaleeseen johtaa input-kentän ilmestymiseen, ja muut klikkaukset, jotka on tehty input-kentän ilmestymisen jälkeen, jätetään huomiotta.

Toteutetaan:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
	
	elem.removeEventListener('click', func); // irrotetaan tapahtuma
});

Tehdään nyt niin, että input-kentän ilmestyessä itse kappaleen teksti katoaa. Tätä varten ennen input-kentän lisäämistä textContent kappaleesta asetetaan tyhjäksi merkkijonoksi:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // ensin kirjoitetaan kappaleen teksti input-kenttään
	elem.textContent = ''; // sitten poistetaan kappaleen teksti
	elem.appendChild(input); // sitten lisätään input-kenttä
	
	elem.removeEventListener('click', func);
});

Tehdään nyt niin, että kun input-kenttä menettää fokuksinsa, tämän input-kentän teksti kirjoitetaan kappaleeseen:

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

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

Huomaa, että meidän ei tarvitse poistaa input-kenttää - se poistaa itsensä, kun kirjoittaa tekstinsä kappaleeseen: koska input-kenttä on osa kappaleen tekstiä, niin minkä tahansa tekstin kirjoittaminen tähän kappaleeseen yksinkertaisesti poistaa meidän input-kenttämme, ja siinä se.

Meillä on kuitenkin vielä yksi ongelma: kappaleen teksti muokkautuu vain ensimmäisen kerran. Ensimmäisen muokkauksen jälkeen toistuva painallus kappaleen tekstiin ei johda mihinkään.

Asiassa on kyse siitä, että input-kentän ilmestyessä me irrotimme tapahtuman kappaleesta yllä kuvattujen syiden vuoksi. Nyt meidän on tarpeen muokkauksen päätyttyä kiinnittää tapahtuma takaisin.

Tehdään tämä:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.textContent = '';
	elem.appendChild(input);
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		elem.addEventListener('click', func); // kiinnitetään tapahtuma takaisin
	});
	
	elem.removeEventListener('click', func);
});

Itsenäisesti, katsomatta koodiini, ratkaiskaa kuvattu tehtävä.