twitter bootstrap - How to fire a keyboard shortcut function in JavaScript? - Stack Overflow

admin管理员组

文章数量:1406052

I have a record functionality in my website. If a user hits Ctrl+Alt+R the recording will begin. Now I would like a button named RECORD in my html page, so that when a user hits that button recording will start.

<button type="submit" class="btn btn-primary" data-toggle="tooltip" data-placement="top" onclick="record_session()" title="Start Recording">Record</button>

in my function below

function record_session(){
    //how can i trigger or initiate  ctrl+alt+r here??
}

I have a record functionality in my website. If a user hits Ctrl+Alt+R the recording will begin. Now I would like a button named RECORD in my html page, so that when a user hits that button recording will start.

<button type="submit" class="btn btn-primary" data-toggle="tooltip" data-placement="top" onclick="record_session()" title="Start Recording">Record</button>

in my function below

function record_session(){
    //how can i trigger or initiate  ctrl+alt+r here??
}

• javascript
• twitter-bootstrap
• keyboard-shortcuts

Share Improve this question Follow edited Jun 3, 2015 at 21:16 Erick Petrucelli 15k99 gold badges6666 silver badges8787 bronze badges asked Apr 1, 2015 at 10:26 Karthikeya VaidyaKarthikeya Vaidya 13111 gold badge33 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you use jQuery you can add keypress event:

$(document).keypress(function(e) {
    if (e.which === 114 && e.ctrlKey && e.altKey) {
        record_session();
    }
});

UPDATE:

var enable_keypress = false;
function record_session(){
    enable_keypress = true;
}
$(document).keypress(function(e) {
    if (enable_keypress) {
        if (e.which === 114 && e.ctrlKey && e.altKey) { // ctrl+alt+r

        }
    }
});

UPDATE 2

to fire keyboard event you can use this:

jQuery:

function keydown(ctrl, alt, shift, which, key) {
    var e = $.Event("keydown");
    e.ctrlKey = ctrl;
    e.altKey = alt;
    e.shiftKey = shift;
    if (typeof which === 'string') {
        key = which;
        which = key.toUpperCase().charCodeAt(0);
    }
    e.key = key;
    e.which = e.keyCode = which;
    return e;
}
function keypress(key) {
    var e = $.Event("keypress");
    e.key = key;
    e.which = e.keyCode = 0;
    return e;
}
function shortcut({
    ctrl = false,
    alt = false,
    shift = false,
    which,
    key
}) {
    var doc = $(document.documentElement || window);
    if (typeof which === 'string') {
        key = which;
        which = key.toUpperCase().charCodeAt(0);
    }
    doc.trigger(keydown(ctrl, alt, shift, which, key));
    doc.trigger(keypress(key));
}

you can use shortcut to trigger both keydown and keypress:

shortcut({ctrl: true, alt: true, which: 'r'});

in case you have listener that do different things (I have this in my tests for jQuery Terminal);

Native code:

 function shortcut({chr, ctrlKey = false, altKey = false}) {
     var lowerChr = chr.toLowerCase();
     var upperChr = chr.toUpperCase();
     var keydownCode = upperChr.charCodeAt(0);
     var e = new KeyboardEvent("keydown", {
         key: lowerChr,
         code: "Key" + upperChr,
         ctrlKey,
         altKey,
         keyCode: keydownCode,
         which: keydownCode
     });
     var keypressCode = lowerChr.charCodeAt(0);
     document.documentElement.dispatchEvent(e);
     var e = new KeyboardEvent("keypress", {
         key: lowerChr,
         ctrlKey,
         altKey,
         charCode: keypressCode,
         keyCode: keypressCode,
         which: keypressCode
     });
     document.documentElement.dispatchEvent(e);
 }

To answer your question straight-forward in 2024 using vanilla JS, I'm going to trigger a customized KeyboardEvent with your specific requirements.

function record_session() {
    // Trigger customized keyboard event
    document.documentElement.dispatchEvent(new KeyboardEvent('keydown', {
        key: 'r', // Lowercase letter
        code: 'KeyR', // Upppercase letter prefixed with "Key"
        ctrlKey: true, // boolean, true means CTRL key is pressed
        altKey: true // boolean, true means ALT key is pressed
    }));
}

• Read more about the key property
• Read more about the code property
• Read more about the ctrlKey property
• Read more about the altKey property
• Check out all the available properties like the SHIFT key, for holding instead of single tap, etc.

The keyCode property is deprecated so you no longer need to include it.

本文标签： twitter bootstrapHow to fire a keyboard shortcut function in JavaScriptStack Overflow