[html]sneltoetsen met meerdere keys

[Jochemmol]

Ik ben bezig met een programma dat volledig in de browser draait.

Nu wil ik sneltoetsen gebruiken. Ik kan dat op dit moment met enkele toetsen. ik doe dat als volgt.

in mijn body heb ik een functie.

code:

onkeypress="ReadPressKey(event);";

deze leest dus contunu of je op een toets drukt.
in deze functie lees ik uit welke toets je drukt en ga dan dat vergelijken en eventuel een actie uitvoeren.
Het nadeel hiervan is als je in een textveld zit dat het dan niet werkt.

Ik wil eigenlijk ctrl+h --> ga naar beginscherm enz. Ik zie alleen geen mogelijkheid om dit voorelkaar te krijgen want die functie in de body lees maar 1 keypress tegelijk uit.

Heeft iemand hier ervaring mee?

[Stoffel]

Je kan accesskeys gebruiken? Dan moet je wel met alt ipv ctrl + toets werken.

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

Geen idee of dat nou wel of niet done is tegenwoordig, ik zit niet zo in het webdesign

[ Voor 49% gewijzigd door Stoffel op 24-01-2008 10:56 ]

[Jochemmol]

Ja acceskeys is vooral handig bij een formulier. Maar ik wil echt je drukt op ctrl (of alt) h en dan linkt de pagina naar de home page.

Of je drukt op ctrl of alt o en er opend een nieuw venster (pop upje).

[momania]

Jochemmol schreef op donderdag 24 januari 2008 @ 11:13:
Ja acceskeys is vooral handig bij een formulier. Maar ik wil echt je drukt op ctrl (of alt) h en dan linkt de pagina naar de home page.

Of je drukt op ctrl of alt o en er opend een nieuw venster (pop upje).

Uhm, aan een link/anchor kan je ook gewoon een accesskey hangen hoor.

[Bozozo]

Een keypress event heeft
event.altKey
event.shiftKey
event.ctrlKey
eraan hangen, om te kijken of die zijn ingedrukt.

[Rekcor]

Deze heb ik ooit van een website geplukt (BSD license)

Gebruik:

JavaScript:

shortcut('Alt+E',alert('Alt+E ingedrukt'));

Hier de code

JavaScript:

/**
 * function shortcut(shortcut,callback,opt)
 * 
 * + adds shortcut 
 * 
 *  First Argument : The Shortcut Key Combination - String
 *    The shortcut key combination should be specified in this format ... Modifier[+Modifier..]+Key. More about this in the Supported Keys section.
 *  Second Argument : Function to be called - Function
 *    Specify the function here. This function will be called if the shortcut key is pressed. The event variable will be passed to it.
 *  Third Argument[OPTIONAL] : Options - Associative Array
 *   This argument must be an associative array with any of these three options...
 *    type - String: The event type - can be 'keydown','keyup','keypress'. Default: 'keydown'
 *    target - DOM Node: The element that should be watched for the keyboard event. Default : document
 *    propagate - Boolean: Allow the event to propagate? Default : false
 **/             
function shortcut(shortcut,callback,opt)
{
    //Provide a set of default options
    var default_options = {
        'type':'keydown',
        'propagate':false,
        'target':document
    }
    if(!opt) opt = default_options;
    else {
        for(var dfo in default_options) {
            if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
        }
    }

    var ele = opt.target
    if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
    var ths = this;

    //The function to be called at keypress
    var func = function(e) {
        e = e || window.event;
        
        //Find Which key is pressed
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code).toLowerCase();

        var keys = shortcut.toLowerCase().split("+");
        //Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
        var kp = 0;
        
        //Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
        var shift_nums = {
            "`":"~",
            "1":"!",
            "2":"@",
            "3":"#",
            "4":"$",
            "5":"%",
            "6":"^",
            "7":"&",
            "8":"*",
            "9":"(",
            "0":")",
            "-":"_",
            "=":"+",
            ";":":",
            "'":"\"",
            ",":"<",
            ".":">",
            "/":"?",
            "\\":"|"
        }
        //Special Keys - and their codes
        var special_keys = {
            'esc':27,
            'escape':27,
            'tab':9,
            'space':32,
            'return':13,
            'enter':13,
            'backspace':8,

            'scrolllock':145,
            'scroll_lock':145,
            'scroll':145,
            'capslock':20,
            'caps_lock':20,
            'caps':20,
            'numlock':144,
            'num_lock':144,
            'num':144,
            
            'pause':19,
            'break':19,
            
            'insert':45,
            'home':36,
            'delete':46,
            'end':35,
            
            'pageup':33,
            'page_up':33,
            'pu':33,

            'pagedown':34,
            'page_down':34,
            'pd':34,

            'left':37,
            'up':38,
            'right':39,
            'down':40,

            'f1':112,
            'f2':113,
            'f3':114,
            'f4':115,
            'f5':116,
            'f6':117,
            'f7':118,
            'f8':119,
            'f9':120,
            'f10':121,
            'f11':122,
            'f12':123
        }


        for(var i=0; k=keys[i],i<keys.length; i++) {
            //Modifiers
            if(k == 'ctrl' || k == 'control') {
                if(e.ctrlKey) kp++;

            } else if(k ==  'shift') {
                if(e.shiftKey) kp++;

            } else if(k == 'alt') {
                    if(e.altKey) kp++;

            } else if(k.length > 1) { //If it is a special key
                if(special_keys[k] == code) kp++;

            } else { //The special keys did not match
                if(character == k) kp++;
                else {
                    if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
                        character = shift_nums[character]; 
                        if(character == k) kp++;
                    }
                }
            }
        }

        if(kp == keys.length) {
            callback(e);

            if(!opt['propagate']) { //Stop the event
                //e.cancelBubble is supported by IE - this will kill the bubbling process.
                e.cancelBubble = true;
                e.returnValue = false;

                //e.stopPropagation works only in Firefox.
                if (e.stopPropagation) {
                    e.stopPropagation();
                    e.preventDefault();
                }
                return false;
            }
        }
    }

    //Attach the function with the event    
    if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
    else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
    else ele['on'+opt['type']] = func;
}

EDIT: Ik zie dat er een nieuwe versie te vinden is op http://www.openjs.com/scr...board_shortcuts/index.php

[MediQ]

Die keyboard shortcuts javascript dingen waar jochemmol naar linkt, werken op mijn Mac wel in Safari, maar niet in Firefox (2)

[ Voor 23% gewijzigd door MediQ op 24-01-2008 14:14 ]