Keskustelu: Nettisivujen teko: Javascript: Div-elementtiin kirjoitus

Moro taas

Mulla on div-elementti id:llä teksti. Sitten minulla on Javascriptin pala, jolla minun tulisi pystyä kirjoittamaan diviin.

function kirjoita() {
	var elementti = "teksti";
	var keycode = event.keyCode;
	var key = String.fromCharCode(keycode);

	document.getElementById(elementti).innerHTML = document.getElementById(elementti).innerHTML + key;
}

document.onkeydown = kirjoita;

Tämä toimii muuten hyvin, mutta kun selain kuuntelee myös näitä näppäimiä, niin se tekee niille omia asioitaan. Esimerkiksi välilyöntiä painettaessa sivu hyppää alaspäin. Miten voisin estää selaimen omat toiminnot näppäimille?

Lisäksi kun siftiä painettaisiin samalla kun jotain kirjainta, pitäisi tulla suuri kirjain (koodi ylhäällä on puutteellinen, se ei pienennä kirjaimia).

Lisäksi tuo osaa käsitellä oikein näppäimet a-z ja 0-9. Erikoismerkit menevät päin seiniä.

Jos joku sanoo, että käyttäisit textareaa, niin sanon vain, että nyt pitää tehdä näin.

Sinun täytyy estää kupliminen. Aiheesta lisää: http://www.quirksmode.org/js/events_order.html

Mitä sitten noin pikaisesti ymmärsin, niin näin minä tekisin:

document.getElementById("teksti").addEventListener('click', kirjoita, true)

Tämä vaan ei toimi.

Mitä click tarkoittaa tuossa? Jos se tarkoittaa sitä, että pitää klikata elementtiin ensin, niin se ei ole hyvä.

Näyttäisitkö lisää?

Muokkaus. Onhan sitä tietenkin contentEditable, mutta haluaisin toteuttaa Javascriptillä :)

Käsitit nyt jotain väärin (tai et lukenut kunnolla). Lue annetulta sivulta kohta "Turning it off".

Olen kääntänyt nämä kuplimiset pois päältä, ainakin niin tuon mukaan pitäisi käydä.

window.event.cancelBubble = true; // IE
stopPropagation(); // Muut

// Ei kai haittaa, kun on molemmat funktiot, vaikka selainta ei tunnisteta?

Mutta selain kuuntelee yhä näppäimiä ja sotkee kaiken. Lisäksi, kun kupliminen on estetty, niin onload, onkeydownit jne. eivät toimi (Miksi näitä kutsutaan?).

Nykyinen koodi osaa kirjoittaa jotain, mutta näppäimet joita selain kuuntelee ja tottelee, eivät toimi. Miten estetään selaimen näppäinten kuuntelu?

stopPropagation();

var element = document.getElementById("teksti").addEventListener("MouseOver", kirjoita);

function kirjoita() {
	alert("Debug");

	var elementti = document.getElementById("teksti");
	var keycode = event.keyCode;
	var key = String.fromCharCode(keycode).toLowerCase();

	element.innerHTML = element.innerHTML + key;
}

Saan virheen "StopPropagation is not defined", joka löytyy Firefoxin error consolista.

e.stopPropagation(); (missä e = event-olio). Tuolla linkitetyllä sivulla onkin cross-browser esimerkki aiheesta.

En ymmärä miten tuo pitäisi tehdä.

1. Selain ei tekisi mitään syötteille (Esim. space ei heittäisi sivua alaspäin)
2. Kun näppäintä painetaan, suoritetaan funktio kirjoita()

Kun näppäintä painetaan, suoritetaan funktio kirjoita(), jossa on koodinpätkä, joka katkaisee kuplimisen. Kupliminen estetään aina tapauskohtaisesti!

Kuvitellaan seuraava HTML:

<div id="hei"><p>Moikka! <a href="">Linkki</a></p></div>

Kuvitellaan että painat vaikkapa tuota linkkiä. Ensin suoritetaan a-elementin onclick.
Sitten jos siellä ei estetä kuplimista, niin suoritetaan p-elementin onclick.
Jos siellä ei estetä kuplimista, niin suoritetaan div-elementin onclick.
Jos siellä ei estetä kuplimista, niin suoritetaan body-elementin onclick.
Jos siellä ei estetä kuplimista, niin suoritetaan html-elementin onclick.

Ja tämä tapahtuu kaikilla eri eventeillä.

En ymmärrä edelleenkään koko kuplinnan ideaa.

Tarkoitus on saada div toimimaan kuin textarea, eli käyttäjä kirjoittaa tekstiä ja se menee diviin. Tämä tekstin tulostus diviin pitäisi toteuttaa Javascriptillä. Kumminkin, kun painan esimerkiksi spacea, niin sivu hyppää tyhmästi.

Textareassa voit painaa melkein kaikkia näppäimiä, ilman että sivu tekee mitään tyhmiään. Minun tyylilläni kun kirjoitetaan diviin, se hyppii ärsyttävästi.

Tosiaan, pitää käyttää e.preventDefaulttia, esimerkki.

Asiaa onKeyDownista, onKeyPressistä sekä IE:n ja muiden eroista.

Nythän tuo koodi antaa vähän mitä merkkejä sattuu mm. nuolinäppäimille.