[JS] Shift-tab afvangen - Softwareontwikkeling

woensdag 16 juni 2004 17:45

Acties:

Verwijderd

Topicstarter

Is het ook mogelijk om in Javascript toetscombinaties af te vangen, zoals shift-tab?
Het gaat nu op deze manier:

code:

<html>
    <head>
        <title>Cursortest</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script language="JavaScript">
            <!--
                function Ini() {
                    id = "1_1_1";
                    document.getElementById(id).focus();
                }
                
                function keyDown(row, uur, min) {
                    var step = 1;
                    var rowmax = 4;
                    var rowmin = 1;
                    var uurmax = 2;
                    var uurmin = 1;
                    var minmax = 4;
                    var minmin = 1;
                    k = window.event.keyCode;
                    // alert(k);
                    if (k == 37) {  // Cursor naar links
                        min = min - step;
                        if (min < minmin) {
                            min = minmax;
                            uur = uur - 1;
                            if (uur < uurmin) { uur = uurmax; }
                        }
                    }
                    if (k == 38) {  // Cursor naar boven
                        row = row - step;
                        if (row < rowmin) { row = rowmax; }
                    }
                    if (k == 39) {  // Cursor naar rechts
                        min = min + step;
                        if (min > minmax) {
                            min = minmin;
                            uur = uur + 1;
                            if (uur > uurmax) { uur = uurmin; }
                        }
                    }
                    if (k == 40) {  // Cursor naar beneden
                        row = row + step;
                        if (row > rowmax) { row = rowmin; }
                    }
                    id = row + '_' + uur + '_' + min;
                    document.getElementById(id).focus();
                }
            // -->
        </script>
    </head>
    
    <body onLoad="Ini()">
        <table id="tabel" align="center" border="1">
            <tr>
                <td><a href="#" id="1_1_1" onKeyDown="keyDown(1,1,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1A</a></td>
                <td><a href="#" id="1_1_2" onKeyDown="keyDown(1,1,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2A</a></td>
                <td><a href="#" id="1_1_3" onKeyDown="keyDown(1,1,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3A</a></td>
                <td><a href="#" id="1_1_4" onKeyDown="keyDown(1,1,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4A</a></td>
                <td><a href="#" id="1_2_1" onKeyDown="keyDown(1,2,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1A</a></td>
                <td><a href="#" id="1_2_2" onKeyDown="keyDown(1,2,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2A</a></td>
                <td><a href="#" id="1_2_3" onKeyDown="keyDown(1,2,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3A</a></td>
                <td><a href="#" id="1_2_4" onKeyDown="keyDown(1,2,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4A</a></td>
            </tr>
            <tr>
                <td><a href="#" id="2_1_1" onKeyDown="keyDown(2,1,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1B</a></td>
                <td><a href="#" id="2_1_2" onKeyDown="keyDown(2,1,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2B</a></td>
                <td><a href="#" id="2_1_3" onKeyDown="keyDown(2,1,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3B</a></td>
                <td><a href="#" id="2_1_4" onKeyDown="keyDown(2,1,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4B</a></td>
                <td><a href="#" id="2_2_1" onKeyDown="keyDown(2,2,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1B</a></td>
                <td><a href="#" id="2_2_2" onKeyDown="keyDown(2,2,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2B</a></td>
                <td><a href="#" id="2_2_3" onKeyDown="keyDown(2,2,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3B</a></td>
                <td><a href="#" id="2_2_4" onKeyDown="keyDown(2,2,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4B</a></td>
            </tr>
            <tr>
                <td><a href="#" id="3_1_1" onKeyDown="keyDown(3,1,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1C</a></td>
                <td><a href="#" id="3_1_2" onKeyDown="keyDown(3,1,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2C</a></td>
                <td><a href="#" id="3_1_3" onKeyDown="keyDown(3,1,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3C</a></td>
                <td><a href="#" id="3_1_4" onKeyDown="keyDown(3,1,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4C</a></td>
                <td><a href="#" id="3_2_1" onKeyDown="keyDown(3,2,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1C</a></td>
                <td><a href="#" id="3_2_2" onKeyDown="keyDown(3,2,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2C</a></td>
                <td><a href="#" id="3_2_3" onKeyDown="keyDown(3,2,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3C</a></td>
                <td><a href="#" id="3_2_4" onKeyDown="keyDown(3,2,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4C</a></td>
            </tr>
            <tr>
                <td><a href="#" id="4_1_1" onKeyDown="keyDown(4,1,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1C</a></td>
                <td><a href="#" id="4_1_2" onKeyDown="keyDown(4,1,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2C</a></td>
                <td><a href="#" id="4_1_3" onKeyDown="keyDown(4,1,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3C</a></td>
                <td><a href="#" id="4_1_4" onKeyDown="keyDown(4,1,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4C</a></td>
                <td><a href="#" id="4_2_1" onKeyDown="keyDown(4,2,1)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">1C</a></td>
                <td><a href="#" id="4_2_2" onKeyDown="keyDown(4,2,2)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">2C</a></td>
                <td><a href="#" id="4_2_3" onKeyDown="keyDown(4,2,3)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">3C</a></td>
                <td><a href="#" id="4_2_4" onKeyDown="keyDown(4,2,4)" onFocus="this.style.color='#FF0000'" onBlur="this.style.color='#000000'">4C</a></td>
            </tr>
        </table>
    </body>
</html>

Je kunt nu met de cursortoetsen door de linkjes heen wandelen, zoals de bedoeling was. Het probleem is dat je er ook met de tab-toets doorheen moet kunnen lopen voor grotere stappen. Nou is dat ook niet zo'n punt, maar achteruitwandelen met shift-tab wel, omdat de functie direct doorlopen wordt als de shift-toets wordt ingedrukt, waardoor de tab (eigenlijk iedere toets daarna) niet meer gezien wordt.
Iemand nog goede idee-en?
Of is deze manier sowieso niet echt slim? Ben namelijk nog niet zo lang bezig met Javascript.
Maar alvast bedankt!

woensdag 16 juni 2004 17:50

Acties:

airliner

Swell

werkt iedergeval niet in firefox

woensdag 16 juni 2004 17:53

Acties:

Verwijderd

Topicstarter

Wat niet? Deze code niet?

Oh, wat ik nog vergeten was te melden, het hoeft voor mij alleen te werken onder IE.

woensdag 16 juni 2004 17:59

Acties:

airliner

Swell

misschien kan je dan hier iets mee: http://www.web-wise-wizar...-capture-key-presses.html

woensdag 16 juni 2004 18:37

Acties:

Ralluph

Aus der Reihe...

voor IE kun je wellicht wat proberen met de event.shiftKey property.

woensdag 16 juni 2004 20:43

Acties:

Clay

cookie erbij?

'k zou gewoon een keydown op het document zetten, niet op elk ding apart, ala:

code:

try {
    document.addEventListener('keydown', handleKeyDown, false);
} catch(fiets) {
    document.attachEvent('onkeydown', handleKeyDown);
}

function handleKeyDown(event) {
    var code = event.keyCode;
    if(event.shiftKey && code == 9) {
        alert('shift tab!');
    }
}

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 17 juni 2004 09:23

Acties:

Verwijderd

Topicstarter

Dat werkt op zich hartstikke mooi, maar dan heb ik een bijkomend probleem: ik weet niet welke link de focus heeft wanneer er op een toets gedrukt wordt. Toch?

In ieder geval is dit wel weer erg handig voor een ander scherm, waar de <esc> de Annuleren-knop moet aanvullen. Bedankt!

donderdag 17 juni 2004 10:24

Acties:

Verwijderd

Topicstarter

Er is nu een probleempjeuitdaging bijgekomen: toetsen worden blijkbaar niet onderschept maar aangevuld. Ik voegde namelijk het volgende stukje code in:

code:

                    if(event.shiftKey && k == 9) {
                        alert('shift tab!');
                        uur = uur - 1;
                        if (uur < uurmin) { uur = uurmax; }
                    } else if(k == 9) {
                        // alert('tab!');
                        uur = uur + 1;
                        if (uur > uurmax) { uur = uurmin; }
                    }

Als je nu op tab drukt (of shift-tab) verspringt de focus netjes 1 uur en nog eens 1 vakje.

Nu is dat wel op te lossen door de focus 1 uur minus 1 minuut (of plus, als je shift-tab drukte) te laten verspringen, maar dat is toch erg omslachtig.

[ Voor 4% gewijzigd door Verwijderd op 17-06-2004 10:33 ]

donderdag 17 juni 2004 10:25

Acties:

André

Analytics dude

Misschien er een return false bij in zetten?

donderdag 17 juni 2004 10:38

Acties:

Verwijderd

Topicstarter

Ah, bedankt! $_/-\o_$

maandag 28 juni 2004 13:24

Acties:

Verwijderd

Topicstarter

Nu heb ik er 2 nieuwe uitdagingen bij. (hoera

)

- ik moet een help schermpje maken en deze moet naar voren komen als er F! wordt gedrukt. Dat lukt gewoon, maar je raadt het al: dan komt ook de Help van IE naar voren en dat wil ik onderdrukken. Kan dat?
- Zelfde verhaal met F5: kan ik die onderdrukken?

maandag 28 juni 2004 13:30

Acties:

BtM909

Watch out Guys...

Ik heb weleens lopen klooien om die help uit te schakelen, maar dat kan, volgens mij, alleen met:

code:

function doeNiks(){
  event.returnValue = false;
}

window.onhelp = doeNiks;

Voor F5 en de rest kan je gewoon

code:

1	event.returnValue = false

gebruiken

[ Voor 12% gewijzigd door BtM909 op 28-06-2004 13:32 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 28 juni 2004 14:10

Acties:

Verwijderd

Topicstarter

Ah, de Help is nu uitgeschakeld.

Het verversen met F5 niet, maar goed, da's achteraf ook niet heel erg, denk ik.

Bedankt!

Pagina: 1

Reageer