Handling 'ctrl+s' keypress event for browser

Question

I was trying to implement the CTRL+S feature for a browser based application. I made a search and came across two scripts in the following to questions

Best cross-browser method to capture CTRL+S with JQuery?
Ctrl+S preventDefault in Chrome

However, when I tried to implement it, it worked but, I still get the default browser save dialog box/window.

My Code:For shortcut.js:

 shortcut.add("Ctrl+S",function() {
     alert("Hi there!");
 },
 {
     'type':'keydown',
     'propagate':false,
     'target':document
});

jQuery hotkeys.js:

$(document).bind('keydown', 'ctrl+s', function(e) {
    e.preventDefault();
    alert('Ctrl+S');
    return false;
});

I believe e.preventDefault(); should do the trick, but for some reason it doesn't work. Where am I going wrong.Sorry if it is simple, still learning jJvascript.

Solution 1

This is to just add a different implementation to the question used by me. Adapted from a SO answer.Also,works for MAC

 document.addEventListener("keydown", function(e) {
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey))      {
        e.preventDefault();
        //your implementation or function calls
      }
    }, false);

Solution 2

You don't need any of those libraries, just try this:

$(document).on('keydown', function(e){
    if(e.ctrlKey && e.which === 83){ // Check for the Ctrl key being pressed, and if the key = [S] (83)
        console.log('Ctrl+S!');
        e.preventDefault();
        return false;
    }
});

The problem was that your code halted at the alert(), preventing your function from interrupting the save dialogue.

(Still uses jQuery)

Solution 3

People are still viewing this it seems, so it's probably worth pointing out that there is no need for jQuery on this one, here:

function keydown (event) {
    var isCtrlKeyDown = navigator.platform.indexOf("Mac") > -1 ? event.metaKey : event.ctrlKey,
        isSDown = (event.key && event.key === "s") || (event.keyCode || event.which) === 83 // falls back to keycode if no event.key

    if (isCtrlKeyDown && isSDown) {
        // prevent default event on newer browsers
        if (event.preventDefault) {
            event.preventDefault()
        }


        // ... your code here ...


        // prevent default event on older browsers
        return false
    }
}

// register the event
if (document.addEventListener) {
    document.addEventListener("keydown", keydown)
} else {
    document.onkeydown = keydown
}

That should work in all browsers, this will also work for folks using alternative keyboard layouts from QWERTY on Windows, which reports incorrect key codes (at least on Chrome 56 on Windows 10 in my testing)

However, this looks kind of clunky, and confusing, so if you are only supporting modern browsers, you can do the following instead:

document.addEventListener("keydown", function keydown (event) {
    if (navigator.platform === "MacIntel" ? event.metaKey : event.ctrlKey && event.key === "s") {
        event.preventDefault()

        // ... your code here ...
    }
})

Solution 4

As of 2017, instead of using e.keyCode === 83 you should use e.key === 's' as the former is deprecated.

Solution 5

No need to use any plugin, just use below jquery code

$(document).bind('keydown', 'ctrl+s', function (e) {
        if (e.ctrlKey && (e.which == 83)) {

            e.preventDefault();
            //Your method()
            return false;
        }
    });

Since you are using alert, the execution halts at the alert and "return false" is not executed until you close the alertbox, thats the reason you see the default dialog.

If your method is long running better use asyn method method instead.

View more solutions

Comments

[coderunner]

Yes Cerbus I did the same!But for alert it brings up the window(I had tried alert first as examples had it).But for console.log,it seems to work fine!! Any problem with the script or it is the default behaviour?? :P

[Cerbrus]

Ah, then the problem was that the alert was pausing your code before it could stop the save dialog from showing.

[coderunner]

Yes got your point Cerbus!!Thank you!!I am going the jquery way as I am not sure i would need any further short cuts in the application!I was a bit stupid there!! :P

[Cerbrus]

@coderunner: you are aware that my code is exactly the same as the answer you accepted, right? (Except that I posted it earlier). Only the other answer used the old .bind() function, which the guys over at jQuery suggest not to use any more. The 'ctrl+s' seems to be data that isn't used anywhere, either.

[Cerbrus]

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.. Also, you're passing optional eventData that isn't used.

[coderunner]

@Cerbus I have not accepted it for the answer,I have used my own implementation.The answer was accepted based on the explanation added in it(that was what I was looking for).I was confused with the alert part.I upvoted your answer with due respect.Please don't mind, no offence.Both the answers were equally quick and informative and looking forward for your support.

[Cerbrus]

Make sure that besides working for you, the answer is really good practice. Sometimes after the answer gets accepted, another comes in, uncovering the fact that previous one was in fact a bad hack.. That's all I'll say.

[coderunner]

Thank you for the info.Will keep that in mind!!Have changed it for the community.

[Shafizadeh]

I think you can also improve your solution using switch() function and expand your answer for every other button, like Ctrl + B, Ctrl + I and ...

[Cerbrus]

That would be past the scope of the question.