Best cross-browser method to capture CTRL S with JQuery

Question

My users would like to be able to hit Ctrl S to save a form   Is there a good cross-browser way of capturing the Ctrl S key combination and submit my form   App is built on Drupal  so jQuery is available

User · Answer

I would like Web applications to not override my default shortcut keys, honestly. Ctrl+S already does something in browsers. Having that change abruptly depending on the site I'm viewing is disruptive and frustrating, not to mention often buggy. I've had sites hijack Ctrl+Tab because it looked the same as Ctrl+I, both ruining my work on the site and preventing me from switching tabs as usual.

If you want shortcut keys, use the accesskey attribute. Please don't break existing browser functionality.

User · Answer

To Alan Bellows answer    e altKey  added for users who use AltGr when typing  e g Poland   Without this pressing AltGr S will give same result as Ctrl S    document  keydown function e    if   e which     115     e which     83     amp  amp   e ctrlKey    e metaKey   amp  amp    e altKey         e preventDefault        alert  Ctrl-s pressed        return false    return true

User · Answer

I combined a few options to support FireFox  IE and Chrome   I ve also updated it to better support mac     simply disables save event for chrome   window  keypress function  event        if    event which    115  amp  amp   navigator platform match  Mac     event metaKey   event ctrlKey    amp  amp    event which    19   return true      event preventDefault        return false          used to process the cmd s and ctrl s events   document  keydown function  event         if  event which    83  amp  amp   navigator platform match  Mac     event metaKey   event ctrlKey             event preventDefault            save event           return false

User · Answer

To Alan Bellows answer    e altKey  added for users who use AltGr when typing  e g Poland   Without this pressing AltGr S will give same result as Ctrl S    document  keydown function e    if   e which     115     e which     83     amp  amp   e ctrlKey    e metaKey   amp  amp    e altKey         e preventDefault        alert  Ctrl-s pressed        return false    return true

User · Answer

window  keypress function event        if    event which    115  amp  amp  event ctrlKey   amp  amp    event which    19   return true      alert  Ctrl-S pressed        event preventDefault        return false        Key codes can differ between browsers  so you may need to check for more than just 115

User · Answer

I like this little plugin  It needs a bit more cross browser friendliness though

User · Answer

You could use a shortcut library to handle the browser specific stuff   shortcut add  Ctrl S  function         alert  Hi there

User · Answer

You could use a shortcut library to handle the browser specific stuff   shortcut add  Ctrl S  function         alert  Hi there

User · Answer

window  keypress function event        if    event which    115  amp  amp  event ctrlKey   amp  amp    event which    19   return true      alert  Ctrl-S pressed        event preventDefault        return false        Key codes can differ between browsers  so you may need to check for more than just 115

User · Answer

Eevee  As the browser becomes the home for richer and richer functionality and starts to replace desktop apps  it s just not going to be an option to forgo the use of keyboard shortcuts  Gmail s rich and intuitive set of keyboard commands was instrumental in my willingness to abandon Outlook  The keyboard shortcuts in Todoist  Google Reader  and Google Calendar all make my life much  much easier on a daily basis    Developers should definitely be careful not to override keystrokes that already have a meaning in the browser  For example  the WMD textbox I m typing into inexplicably interprets Ctrl Del as  Blockquote  rather than  delete word forward   I m curious if there s a standard list somewhere of  browser-safe  shortcuts that site developers can use and that browsers will commit to staying away from in future versions

User · Answer

window  keypress function event        if    event which    115  amp  amp  event ctrlKey   amp  amp    event which    19   return true      alert  Ctrl-S pressed        event preventDefault        return false        Key codes can differ between browsers  so you may need to check for more than just 115

User · Answer

You could use a shortcut library to handle the browser specific stuff   shortcut add  Ctrl S  function         alert  Hi there

User · Answer

This should work  adapted from https   stackoverflow com a 8285722 388902    var ctrl down   false  var ctrl key   17  var s key   83     document  keydown function e        if  e keyCode    ctrl key  ctrl down   true     keyup function e        if  e keyCode    ctrl key  ctrl down   false         document  keydown function e        if  ctrl down  amp  amp   e keyCode    s key             alert  Ctrl-s pressed               Your code         return false

User · Answer

You could use a shortcut library to handle the browser specific stuff   shortcut add  Ctrl S  function         alert  Hi there

User · Answer

x000D   x000D    document  keydown function e    x000D      if   e key     s     e key     S     amp  amp   e ctrlKey    e metaKey   x000D        x000D          e preventDefault    x000D          alert  Ctrl-s pressed    x000D          return false  x000D        x000D      return true  x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D  Try pressing ctrl s somewhere  x000D   x000D   x000D    This is an up-to-date version of  AlanBellows s answer  replacing which with key  It also works even with Chrome s capital key glitch  where if you press Ctrl S it sends capital S instead of s   Works in all modern browsers

User · Answer

I solved my problem on IE  using an alert  With a message   to prevent default Behavior   window addEventListener  keydown   function  e        if e ctrlKey    e metaKey           e preventDefault      Good browsers         if  navigator userAgent indexOf  MSIE       -1    navigator appVersion indexOf  Trident     gt  0      hack for ie             alert  Please  use the print button located on the top bar                return

User · Answer

Eevee  As the browser becomes the home for richer and richer functionality and starts to replace desktop apps  it s just not going to be an option to forgo the use of keyboard shortcuts  Gmail s rich and intuitive set of keyboard commands was instrumental in my willingness to abandon Outlook  The keyboard shortcuts in Todoist  Google Reader  and Google Calendar all make my life much  much easier on a daily basis    Developers should definitely be careful not to override keystrokes that already have a meaning in the browser  For example  the WMD textbox I m typing into inexplicably interprets Ctrl Del as  Blockquote  rather than  delete word forward   I m curious if there s a standard list somewhere of  browser-safe  shortcuts that site developers can use and that browsers will commit to staying away from in future versions

User · Answer

This jQuery solution works for me in Chrome and Firefox  for both Ctrl S and Cmd S     document  keydown function e         var key   undefined      var possible     e key  e keyIdentifier  e keyCode  e which         while  key     undefined  amp  amp  possible length  gt  0                key   possible pop               if  key  amp  amp   key     115     key     83     amp  amp   e ctrlKey    e metaKey   amp  amp    e altKey                 e preventDefault            alert  Ctrl-s pressed            return false            return true

User · Answer

I combined a few options to support FireFox  IE and Chrome   I ve also updated it to better support mac     simply disables save event for chrome   window  keypress function  event        if    event which    115  amp  amp   navigator platform match  Mac     event metaKey   event ctrlKey    amp  amp    event which    19   return true      event preventDefault        return false          used to process the cmd s and ctrl s events   document  keydown function  event         if  event which    83  amp  amp   navigator platform match  Mac     event metaKey   event ctrlKey             event preventDefault            save event           return false

User · Answer

I would like Web applications to not override my default shortcut keys, honestly. Ctrl+S already does something in browsers. Having that change abruptly depending on the site I'm viewing is disruptive and frustrating, not to mention often buggy. I've had sites hijack Ctrl+Tab because it looked the same as Ctrl+I, both ruining my work on the site and preventing me from switching tabs as usual.

If you want shortcut keys, use the accesskey attribute. Please don't break existing browser functionality.

User · Answer

example   shortcut add  Ctrl c  function         alert  Ok                 type   keydown        propagate  false       target  document       usage   lt script type  text javascript  src  js shortcut js  gt  lt  script gt    link for download  http   www openjs com scripts events keyboard shortcuts

User · Answer

x000D   x000D    document  keydown function e    x000D      if   e key     s     e key     S     amp  amp   e ctrlKey    e metaKey   x000D        x000D          e preventDefault    x000D          alert  Ctrl-s pressed    x000D          return false  x000D        x000D      return true  x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D  Try pressing ctrl s somewhere  x000D   x000D   x000D    This is an up-to-date version of  AlanBellows s answer  replacing which with key  It also works even with Chrome s capital key glitch  where if you press Ctrl S it sends capital S instead of s   Works in all modern browsers

User · Answer

Eevee  As the browser becomes the home for richer and richer functionality and starts to replace desktop apps  it s just not going to be an option to forgo the use of keyboard shortcuts  Gmail s rich and intuitive set of keyboard commands was instrumental in my willingness to abandon Outlook  The keyboard shortcuts in Todoist  Google Reader  and Google Calendar all make my life much  much easier on a daily basis    Developers should definitely be careful not to override keystrokes that already have a meaning in the browser  For example  the WMD textbox I m typing into inexplicably interprets Ctrl Del as  Blockquote  rather than  delete word forward   I m curious if there s a standard list somewhere of  browser-safe  shortcuts that site developers can use and that browsers will commit to staying away from in future versions

User · Answer

This works for me  using jquery  to overload Ctrl S  Ctrl F and Ctrl G     window  bind  keydown   function event        if  event ctrlKey    event metaKey            switch  String fromCharCode event which  toLowerCase              case  s               event preventDefault                alert  ctrl-s                break          case  f               event preventDefault                alert  ctrl-f                break          case  g               event preventDefault                alert  ctrl-g                break

User · Answer

This Plugin Made by me may be helpful   Plugin  You can use this plugin you have to supply the key Codes and function to be run like this  simulatorControl  17 83   function     console log  You have pressed Ctrl Z          In the code i have displayed how to perform for Ctrl S  You will get Detailed Documentation On the link  Plugin is in JavaScript Code section Of my Pen on Codepen

User · Answer

I would like Web applications to not override my default shortcut keys, honestly. Ctrl+S already does something in browsers. Having that change abruptly depending on the site I'm viewing is disruptive and frustrating, not to mention often buggy. I've had sites hijack Ctrl+Tab because it looked the same as Ctrl+I, both ruining my work on the site and preventing me from switching tabs as usual.

If you want shortcut keys, use the accesskey attribute. Please don't break existing browser functionality.

User · Answer

I like this little plugin  It needs a bit more cross browser friendliness though

User · Answer

I would like Web applications to not override my default shortcut keys, honestly. Ctrl+S already does something in browsers. Having that change abruptly depending on the site I'm viewing is disruptive and frustrating, not to mention often buggy. I've had sites hijack Ctrl+Tab because it looked the same as Ctrl+I, both ruining my work on the site and preventing me from switching tabs as usual.

If you want shortcut keys, use the accesskey attribute. Please don't break existing browser functionality.

User · Answer

This one worked for me on Chrome     for some reason event which returns a capital S  83  for me  not sure why  regardless of the caps lock state  so I used fromCharCode and toLowerCase just to be on the safe side    document  keydown function event           19 for Mac Command S     if     String fromCharCode event which  toLowerCase       s   amp  amp  event ctrlKey   amp  amp    event which    19   return true       alert  Ctrl-s pressed         event preventDefault        return false        If anyone knows why I get 83 and not 115  I will be happy to hear  also if anyone tests this on other browsers I ll be happy to hear if it works or not

User · Answer

This should work  adapted from https   stackoverflow com a 8285722 388902    var ctrl down   false  var ctrl key   17  var s key   83     document  keydown function e        if  e keyCode    ctrl key  ctrl down   true     keyup function e        if  e keyCode    ctrl key  ctrl down   false         document  keydown function e        if  ctrl down  amp  amp   e keyCode    s key             alert  Ctrl-s pressed               Your code         return false

User · Answer

This one worked for me on Chrome     for some reason event which returns a capital S  83  for me  not sure why  regardless of the caps lock state  so I used fromCharCode and toLowerCase just to be on the safe side    document  keydown function event           19 for Mac Command S     if     String fromCharCode event which  toLowerCase       s   amp  amp  event ctrlKey   amp  amp    event which    19   return true       alert  Ctrl-s pressed         event preventDefault        return false        If anyone knows why I get 83 and not 115  I will be happy to hear  also if anyone tests this on other browsers I ll be happy to hear if it works or not

User · Answer

example   shortcut add  Ctrl c  function         alert  Ok                 type   keydown        propagate  false       target  document       usage   lt script type  text javascript  src  js shortcut js  gt  lt  script gt    link for download  http   www openjs com scripts events keyboard shortcuts

User · Answer

This was my solution  which is much easier to read than other suggestions here  can easily include other key combinations  and has been tested on IE  Chrome  and Firefox     window  keydown function evt        var key   String fromCharCode evt keyCode         ctrl s     if  key toLowerCase        s   amp  amp  evt ctrlKey            fnToRun            evt preventDefault true           return false            return true

User · Answer

This works for me  using jquery  to overload Ctrl S  Ctrl F and Ctrl G     window  bind  keydown   function event        if  event ctrlKey    event metaKey            switch  String fromCharCode event which  toLowerCase              case  s               event preventDefault                alert  ctrl-s                break          case  f               event preventDefault                alert  ctrl-f                break          case  g               event preventDefault                alert  ctrl-g                break

User · Answer

This Plugin Made by me may be helpful   Plugin  You can use this plugin you have to supply the key Codes and function to be run like this  simulatorControl  17 83   function     console log  You have pressed Ctrl Z          In the code i have displayed how to perform for Ctrl S  You will get Detailed Documentation On the link  Plugin is in JavaScript Code section Of my Pen on Codepen

User · Answer

This was my solution  which is much easier to read than other suggestions here  can easily include other key combinations  and has been tested on IE  Chrome  and Firefox     window  keydown function evt        var key   String fromCharCode evt keyCode         ctrl s     if  key toLowerCase        s   amp  amp  evt ctrlKey            fnToRun            evt preventDefault true           return false            return true

User · Answer

window  keypress function event        if    event which    115  amp  amp  event ctrlKey   amp  amp    event which    19   return true      alert  Ctrl-S pressed        event preventDefault        return false        Key codes can differ between browsers  so you may need to check for more than just 115

User · Answer

Eevee  As the browser becomes the home for richer and richer functionality and starts to replace desktop apps  it s just not going to be an option to forgo the use of keyboard shortcuts  Gmail s rich and intuitive set of keyboard commands was instrumental in my willingness to abandon Outlook  The keyboard shortcuts in Todoist  Google Reader  and Google Calendar all make my life much  much easier on a daily basis    Developers should definitely be careful not to override keystrokes that already have a meaning in the browser  For example  the WMD textbox I m typing into inexplicably interprets Ctrl Del as  Blockquote  rather than  delete word forward   I m curious if there s a standard list somewhere of  browser-safe  shortcuts that site developers can use and that browsers will commit to staying away from in future versions

User · Answer

I solved my problem on IE  using an alert  With a message   to prevent default Behavior   window addEventListener  keydown   function  e        if e ctrlKey    e metaKey           e preventDefault      Good browsers         if  navigator userAgent indexOf  MSIE       -1    navigator appVersion indexOf  Trident     gt  0      hack for ie             alert  Please  use the print button located on the top bar                return

User · Answer

This jQuery solution works for me in Chrome and Firefox  for both Ctrl S and Cmd S     document  keydown function e         var key   undefined      var possible     e key  e keyIdentifier  e keyCode  e which         while  key     undefined  amp  amp  possible length  gt  0                key   possible pop               if  key  amp  amp   key     115     key     83     amp  amp   e ctrlKey    e metaKey   amp  amp    e altKey                 e preventDefault            alert  Ctrl-s pressed            return false            return true

[javascript] Best cross-browser method to capture CTRL+S with JQuery?

Examples related to javascript

Examples related to jquery