Keskustelu: Nettisivujen teko: JS: input-kenttä ongelma

Mistä ihmeestä mahtaa johtua, kun lisään html-elementin sisään JavaScriptin innerHTML-ominaisuudella input-kentän ja vien siihen kohdistimen, niin kursori ei ala "vilkkumaan" normaaliin tapaan, vaan se välähtää kerran ja sitten kohdistus katoaa. Samoin jos kirjoitan kenttää jotain ja asetan kohdistuksen uudelleen kenttään, niin kentän sisältö muuttuu nulliksi.

JS-koodi näyttää seuraavalta:

function editContents(solunNimi) {

			var solu = document.getElementById(solunNimi);

			var lomake = "<form name=\"lomake\" />";
			lomake += "<input type=\"text\" name=\"sisalto\" value=\"" + solu.firstChild.nodeValue + "\" />";
			lomake += "</form>";

			solu.innerHTML = lomake;

		}

(Mod. vaihtoi JS-kooditagit.)

Kristallipallo kertoo, että kutsut editContents-funktiota joka kerta uudestaan. Lisäksi koodissa näkyy seuraavia ongelmia:

• Jos solu on tyhjä, firstChild on null.
• Jos sisällössä on lainausmerkki, tapahtuu kummia.
• Vielä kummempia tapahtuu, jos teksti sisältää merkit ">.
• Lomakkeen aloitustagissa on lopussa virheellisesti /-merkki.
• Jos käytät funktiota moneen soluun, saat monta lomaketta, joilla on sama nimi. Onko tässä järkeä? Onko nimi edes tarpeen?
• Lomakkeelta puuttuvat action ja submit-nappi. Onko form-elementti edes tarpeen?

Oma toteutukseni olisi ehkä tällainen:

function edit(id) {
  var solu = document.getElementById(id);

  // Ei käsitellä samaa moneen kertaan.
  if (solu.getElementsByTagName("input").length) {
    return false;
  }

  // Haetaan sisältö; varaudutaan myös tyhjään soluun!
  var teksti = "";
  if (solu.firstChild) {
    teksti = solu.firstChild.nodeValue;
  }

  // Luodaan lomake ja laitetaan sisältö.
  solu.innerHTML = "<input type='text' />";
  solu.getElementsByTagName("input")[0].value = teksti;
}

Sulla on aikamoinen kristallipallo! :DD