How do I capture a CTRL-S without jQuery or any other library?

An up to date answer in 2020.

Since the Keyboard event object has been changed lately, and many of its old properties are now deprecated, here’s a modernized code:

document.addEventListener('keydown', e => {
  if (e.ctrlKey && e.key === 's') {
    // Prevent the Save dialog to open
    e.preventDefault();
    // Place your code here
    console.log('CTRL + S');
  }
});

Notice the new key property, which contains the information about the stroked key. Additionally, some browsers might not allow code to override the system shortcuts.

Related Contents:

  1. Can scripts be inserted with innerHTML?
  2. Detect changes in the DOM
  3. Check if an image is loaded (no errors) with jQuery
  4. Get selected text from a drop-down list (select box) using jQuery
  5. How to resolve the C:\fakepath?
  6. How to stop event propagation with inline onclick attribute?
  7. Is there a spec that the id of elements should be made global variable?
  8. “innerHTML += …” vs “appendChild(txtNode)”
  9. What is the difference between children and childNodes in JavaScript?
  10. How can I check if an element exists in the visible DOM?
  11. innerText vs innerHTML vs label vs text vs textContent vs outerText
  12. If a DOM Element is removed, are its listeners also removed from memory?
  13. How to check in Javascript if one element is contained within another
  14. Copy / Put text on the clipboard with FireFox, Safari and Chrome
  15. Browser-independent way to detect when image has been loaded
  16. How to serialize DOM node to JSON even if there are circular references?
  17. Replace HTML page with contents retrieved via AJAX
  18. How to Implement DOM Data Binding in JavaScript
  19. Is there a DOM event that fires when an HTML select element is closed?
  20. Getting value of HTML Checkbox from onclick/onchange events
  21. Adding an onclick event to a table row
  22. How to bind bootstrap popover on dynamic elements
  23. How to check if an embedded SVG document is loaded in an html page?
  24. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  25. jQuery: how to change tag name?
  26. Check if option is selected with jQuery, if not select a default
  27. Add SVG element to existing SVG using DOM
  28. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  29. How to get the title of HTML page with JavaScript?
  30. Does the onchange event propagate?
  31. Detecting if a browser is in full screen mode
  32. JavaScript: DOM load events, execution sequence, and $(document).ready()
  33. Convert String to XML Document in JavaScript
  34. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  35. Native JS equivalent to jQuery delegation
  36. Console shows error about Content Security policy and lots of failed GET requests
  37. How to check if DOM is ready without a framework?
  38. Get elements from page.evaluate in Puppeteer? [duplicate]
  39. Why is the loop assigning a reference of the last index element to? [duplicate]
  40. How do I monitor the DOM for changes?
  41. JQuery html() vs. innerHTML
  42. Does HTML Hidden control have any events? Like onchange or something?
  43. Is there a flexible way to modify the contents of an editable element?
  44. Attach event listener through javascript to radio button
  45. DOM / pure JavaScript solution to jQuery.closest() implementation?
  46. IE’s document.selection.createRange doesn’t include leading or trailing blank lines
  47. How can I determine the type of an HTML element in JavaScript?
  48. How to check null objects in jQuery
  49. Get immediate first child element
  50. Javascript: Let user select an HTML element like Firebug?

Leave a Comment