Avatar billede Keld Nielsen Professor
04. september 2005 - 11:12 Der er 3 kommentarer og
1 løsning

Sæt focus på button og skift button med pil

Jeg har en lille side, hvor vi skal en masser sider igennem - for rettelse.

Jeg ønsker at der kommer focus på første knap (OK) og at man kan skifte focus til de efterfølgende med piletasterne, op og ned. Nederste med ned igen, betyder hop til første.

For at gøre det lidt mere forståelig, prøv at kigge på denne testside: http://www.prolight.dk/I2u-filtest/
Avatar billede olebole Juniormester
04. september 2005 - 21:21 #1
<ole>

Prøv noget à la dette:

<script type="text/JavaScript">
function kDown(e) {
    e = e? e : window.event;
    if (e.keyCode==38) { // Up
        if (btnInx>0) btnInx--;
        else btnInx = aBtns.length-1;
    }
    if (e.keyCode==40) { // Down
        if (btnInx<aBtns.length-1) btnInx++;
        else btnInx = 0;
    }
    aBtns[btnInx].focus();
}

var aBtns = btnInx = null;
window.onload = function() {
    aBtns = document.getElementById("btnHolder").getElementsByTagName("button");
    aBtns[0].focus();
    btnInx = 0;
    document.onkeydown = kDown;
}
</script>

<div id="btnHolder">
<button onclick="alert('Knap 1')">Knap 1</button><br>
<button onclick="alert('Knap 2')">Knap 2</button><br>
<button onclick="alert('Knap 3')">Knap 3</button><br>
<button onclick="alert('Knap 4')">Knap 4</button>
</div>

Scriptet forudsætter, knapperne er button-elementer - og at de ligger i et element med ID'en 'btnHolder'. Ellers burde resten være nogenlunde til at gennemskue. Er jeg for hurtig med den antagelse, må du lige spørge  ;o)

/mvh
</bole>
Avatar billede Keld Nielsen Professor
05. september 2005 - 08:43 #2
Tak for hjælpen, det var lige som jeg havde forestillet mig! ...jeg har lagt rettelsen ud på test-siden.
Avatar billede olebole Juniormester
05. september 2005 - 13:33 #3
Selvtak ... det ser jo ud til at funke fint  ;o)
For en anden gangs skyld, har venstre- og højre-pil keyCode 37 og 39 ... man kan jo aldrig vide, hvad du kunne finde på  :)
Avatar billede olebole Juniormester
05. september 2005 - 16:11 #4
Tak for points  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester