Handling ctrl + s keypress for browser

Question

I tried to implement the CTRL + S function for a browser based application. I did a search and came across two scenarios below:

Best cross browser method to capture CTRL + S using jQuery?
Ctrl + S preventDefault in Chrome

However, when I tried to implement it, it worked, but I still get the default browser to save the 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 mistaken. Sorry if this is simple while still learning javascript.
Thank you for your time.

Answer 1

This is just adding another implementation to the question that I use. Adapted from SO response. 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); 

Answer 2

You do not need any of these 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 stopped at alert() , preventing your function from interrupting the save dialog.

(still using jQuery)

Answer 3

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

 $(document).bind('keydown', 'ctrl+s', function (e) { if (e.ctrlKey && (e.which == 83)) { e.preventDefault(); //Your method() return false; } }); 

Since you use a warning, execution pauses when notified, and "return false" is not executed until you close the notification window, this is the reason you see the default dialog.

If your method works better, use the asyn method method instead.

Answer 4

People still view this as it seems, so it's probably worth noting that there is no need for jQuery for this:

 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 } 

This should work in all browsers, it will also work for people using alternative keyboard layouts from QWERTY on Windows that report incorrect key codes (at least in Chrome 56 on Windows 10 in my testing)

However, this looks pretty awkward and confusing, so if you only support modern browsers, you can do the following:

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

Answer 5

Starting in 2017, instead of e.keyCode === 83 you should use e.key === 's' , since the first one is deprecated.