Java script -> Navigacija s smernimi tipkami

Pozdravljeni,

ponovno se oglašam, imam še eno težavo, ki bi jo rad rešil na kar se da eleganten način.

Imam en projekt, kjer bi želel celotno "spletno stran" krmiliti zgolj s smernimi tpkami in gumbom enter, torej kliki z miško ne pridejo v poštev.

Vključil sem naslednjo kodo, ki posluša vnose iz tipkovnice:

window.addEventListener("keydown", keydown, false);
function keydown(e) {
	if(e.keyCode == 39) {
		moveRight();
	}
	else if(e.keyCode == 37) {
		moveLeft();
	}
	else if(e.keyCode == 40) {
		moveUp();
	}
	else if (e.keyCode == 38) {
		moveDown();
	}		
}

Zanima me, kako bi najenostavneje skomponiral funkcijo recimo moveUp(), da bi poiskala in fokusirala najbljižji zgornji element na trenutni strani.

Imam sicer rešitev, s katero bi vsak element posebej indeksiral z x, y parametri in potem izvedel funkcijo getElementById("x10y20").focus(), v primeru, da je trenutno fokusiran element "x10y19", vendar verjamem, da obstaja še kakšna druga, bolj čista rešitev.

Prosim za kakšen predlog, če kdo ve.

Hvala že v naprej,
Tadej

Živjo, Baja.

Ne vem, če sem dovolj natančno opisal težavo, vendar jaz ne potrebujem funkcije scrollanja strani, ampak fokusiranje določenih elementov na strani. Celotno stran bom imel vidno v enem samem oknu in se ne bo scrollala. Smerne tipke pa bi uporabljal za fokusiranje določenih elementov na strani, tako kot lahko to storimo s tipko "Tab". V glavnem v browserju, kjer bom imel projekt prikazan, so smerne tipke brez povezave neaktivne.

Hvala.

Kaj pa je cilj te navigacije s tipkovnico?
Premikanje po tabeli, meniju, .. ?

vse kar rabis je 5 funkcij. gor, dol, levo, desno in enter. vse ostalo je isto kot bi delal z miško.

maš že kakšen html source?

Baja,

težava je ker nimam določene nobene tabele z inputi. Po tebeli je zelo enostavno navigirat, se da narediti kot si dal na primeru (imaš dejansko kot neko matrico - simetrija). Ta moj HTML source je precej kompleksen.

Jaz sem razmišljal tudi v tej smeri, da bi vsak element s povezavo na strani označil z ID ki bi nosil koordinate npr.

<a id="link-x10-y20">Link1</a>

. To bi pomenilo, da se element nahaja nekje na območju koordinate x=10, y=20, potem pa bi funkciji MoveDown določil, da najde prvi naslednji element koordinate y, ki je večji od 20. Če bi našel npr. "25", bi se sfokusiral na element

<a id="link-x10-y25">

:)
Tako nekako, ni pa to neka čista rešitev. Bom pa primoran nekaj narediti.

Uporabi kodo iz tukaj.
- vključiš še svojo kodo za vnos iz tipkovnice
- če imaš svoj html narejen tako, da so tipke kot button, spremeni kodo da ti ne bo treba pisati zraven še classa - ampak da ti sam izbere vse elemente vrste button
- vrstni red premikanja bo verjetno kar vrstni red iz html-ja

Hvala vsem za trud in pomoč. Imam dovolj informacij, nekaj bom oz. sem delno že ustvaril.

Hvala še enkrat vsem in lep dan.

Tadej