Keskustelu: Nettisivujen teko: Js näppäimen tunnistus ja kohdistimen siirto

Minulla on input-kentälle asetettu tällä tavalla:

onKeyPress="if(event.keyCode===40) document.getElementById('solu3_2').onFocus();"

Kuten tuosta voi arvata, yritän nuoli alas painikkeella vaikuttaa siihen että kursori siirretään toiseen paikkaan lomakkeella, tässä tapauksessa alempaan soluun.
Saako tuota onnistumaan ja mitä muuta tarvitaan? Kokeilin myös pelkällä id-nimellä, jota nettisivuilla myös jotkut suosittelee.

Kannattaa kyllä opetella kirjoittamaan JS-koodi muualle kuin HTML:n sekaan, siis script-tageihin sivun alkuun tai aivan erilliseen tiedostoon. Tuollaisen sotkun kirjoittaminen, lukeminen ja etenkin ylläpito on hankalaa.

Tapahtuma-attribuutit kuuluisi kirjoittaa pienellä: onkeypress, onfocus jne. HTML:ssä asialla ei ole merkitystä, mutta XHTML:ssä ja JS:ssä väärä kirjainkoko ei toimi ollenkaan.

Tarkoituksesi on ilmeisesti siirtyä toiseen kenttään (input.focus()). Nykyinen koodisi ei tee mitään, koska onFocus on väärin kirjoitettu, ja vaikka muuttaisit sen muotoon onfocus, koodisi vain kutsuisi tapahtumankäsittelijää eli huijaisi itseään.

Metabolix kirjoitti:

Kannattaa kyllä opetella kirjoittamaan JS-koodi muualle kuin HTML:n sekaan, siis script-tageihin sivun alkuun tai aivan erilliseen tiedostoon. Tuollaisen sotkun kirjoittaminen, lukeminen ja etenkin ylläpito on hankalaa.

Tapahtuma-attribuutit kuuluisi kirjoittaa pienellä: onkeypress, onfocus jne. HTML:ssä asialla ei ole merkitystä, mutta XHTML:ssä ja JS:ssä väärä kirjainkoko ei toimi ollenkaan.

Tarkoituksesi on ilmeisesti siirtyä toiseen kenttään (input.focus()). Nykyinen koodisi ei tee mitään, koska onFocus on väärin kirjoitettu, ja vaikka muuttaisit sen muotoon onfocus, koodisi vain kutsuisi tapahtumankäsittelijää eli huijaisi itseään.

Siinäpä sitä onkin opettelua kerrakseen...
Tuo ei tosiaankan toimi, vaikka pienennän kirjaimet ja muutan tilalle input.focus().

No jos kirjoitit suoraan "input.focus()", niin ei se todellakaan toimi. inputin tilalle pitää laittaa se kentän oikea nimi.

Macro kirjoitti:

No jos kirjoitit suoraan "input.focus()", niin ei se todellakaan toimi. inputin tilalle pitää laittaa se kentän oikea nimi.

Eipä se tee mitään..

onkeypress="if(event.keycode===40) solu2_1.focus();"

eikä ilmoita virheitä

Olisiko ihan mahdotonta opetella vähän JavaScriptia ja vasta sitten yrittää koodata sillä? Jos noin voisi kirjoittaa, mitä ihmettä varten luulet sitten esimerkiksi getElementById-funktion olevan?

Lyhykäisessä mallikoodissani oli siis looginen lähtöoletus, että muuttuja nimeltä input viittaa haluamaasi input-elementtiin. Nythän sinulla ei näin ole.

Entä missä tiedonhakutaito?

pistemies kirjoitti:

onkeypress="if(event.keycode===40) solu2_1.focus();"

Mietipä vielä uudestaan, mitkä asiat piti kirjoittaa pienellä ja mitä ei. Sanoin tämän mielestäni hyvin selvästi ja annoin kaksi esimerkkiäkin. Vinkki virheestäsi: typeof event.keycode == "undefined".

Yritän miettiä, miten sen saisi tiedoston alussa määritettyä.
Esimerkeissä, joita olen löytänyt, viitataan lomakkeen input-kenttien id-nimiin.
Onko mahdollista valita vain lomakkeen (form) id-nimi ja valita kaikki siinä olevat input-kentät joiden tyyppi on text? Siis ilman input-kenttien nimiä?
Ehkä ei...kun id pitäisi antaa sitten kun halutaan kertoa mihin kursoria siirretään.
Saa sen koko lomakkeen tietysti silmukassa tulostettua javascript koodiin....kunhan ensin saa yhden testissä toimimaan.

Voihan hitsi!

event.keyCode

Toimii!! Noin pieni muutos, yhden kirjaimen muuttaminen, auttoi.
Kiitos, Meta!

Mutta yritän vielä saada tuota systeemiä muutettua..

pistemies kirjoitti:

Yritän miettiä, miten sen saisi tiedoston alussa määritettyä.
Esimerkeissä, joita olen löytänyt, viitataan lomakkeen input-kenttien id-nimiin.

Kyse ei ole JavaScriptistä vaan IE:n omasta JScript-kielestä. Web-ohjelmoinnissa pätee hyvänä nyrkkisääntönä, että mitä vanhempi esimerkki on, sitä epäluotettavampikin se on. Mitään yli viisi vuotta vanhaa koodia on ihan turha vilaistakaan. Joku perusteet hallitseva voi niistä saada yleisluontoista apua siitä, mihin suuntaan kannattaa lähteä, mutta copy-paste-koodaamiseen ne ovat kelvottomia.

Tämän verran enemmän php-koodia tämä onkeypress minulta vei. Käytännössä, kun homma tulostuu html:nä, siitä tulee aika paljon tekstiä lähdekoodiin.

               $a40=$r+1;
               $b38=$r-1;
               $r37=$c-1;
               $r39=$c+1;
                $col .=' onkeypress="';
               # jos kyseessä ei ole ylin- eikä alin rivi, aetetaan toiminto nuoli-alas/ylös näppäimelle
              if($r !=$rows-1 && $r !=0){
               $col .='if(event.keyCode===40) solu'.$a40.'_'.$c.'.focus();if(event.keyCode===38) solu'.$b38.'_'.$c.'.focus();';
              }
              if($r == 0){
               $col .='if(event.keyCode===40) solu'.$a40.'_'.$c.'.focus();';
              }
              if($r ==$rows-1){
               $col .='if(event.keyCode===38) solu'.$b38.'_'.$c.'.focus();';
              }
                 if($c !=$cols){
		               # jos kyseessä ei ole viimeisin sarake oikella
		               $col .='if(event.keyCode===39) solu'.$r.'_'.$r39.'.focus();';
		              }
		              if($c == 1){
		               # jos kyseessä on 1. sarake
		               $col .='"';
		              }
		              if($c !=1){
		              # jos kyseessä ei ole 1. sarake
		               $col .='if(event.keyCode===37) solu'.$r.'_'.$r37.'.focus();"';
		              }

Annan tuon toistaiseksi olla noin, sen verran aikaa vievää on tuo javascriptin opettelu.