How to Ctrl + S to save in JavaScript

Written by
Published on

The Ctrl + s shortcut has become so natural as a saving mechanism, that I find myself doing it automatically many times with websites. If you are building an editor of some kind, like a text editor, it might makes sense to begin to include it as a feature. So the following is a quick script to do just that. I use it myself on the custom CMS that runs this blog.

"Control + s" essentially comes down to 2 things. The first being capturing the control key and flagging it so that we know that it is pressed.

And secondly, capturing the 's' key press right after. If both of these things are true, then you have yourself a ctrl+s mechanism.

First up, let's get the keycode for the Ctrl key. Using the keycode lookup chart I have here, we can see that ctrl translates to a 17 keycode.

Note: Typically, you want to ctrl+s only when an input field has some form of focus on it. You don't want to hijack the keys from the browser completely, as having ctrl+s perform its default behavior is still important from a usability perspective.

So let's assume that you have the following markup on your page. Just a standard text field and a label to show us when something is saved.

<form>
    <textarea id='txtInput'></textarea>

<div id='status'></div> </form>

We can attach the following event listener to the input field to capture which key has been pressed.

var isCtrl = false;
window.addEventListener('load', function(){
    document.getElementById('txtInput').addEventListener('keydown', function(e){
        if (e.keyCode == 17) {
            e.preventDefault();
            isCtrl = true;
        }
    });
});

Next up, we'll also need to listen (in the same event handler as above) for the 's' key press. Which translates to an 83 keycode.

var isCtrl = false;
window.addEventListener('load', function(){
    document.getElementById('txtInput').addEventListener('keydown', function(e){
        if (e.keyCode == 17) {
            e.preventDefault();
            isCtrl = true;
        }


	if (e.keyCode == 83 && isCtrl){
           e.preventDefault();
           // your save logic goes here
	   document.getElementById('status').innerHTML = 'saved';
	}
    });
});

You will need to preventDefault on the 's' key event in order to stop the browser from attempting its own 'save' mechanism. Otherwise, you will still see the save dialog appear that the browser provides.

And lastly, we need to clear the Ctrl flag by setting it back to false once we are done. We can do that with the following event handler.

document.getElementById('txtInput').addEventListener('keyup', function(e){
            e.preventDefault();
            isCtrl = false;
    });

You can technically use the "Ctrl + Key" combination above for any custom functionality that you may have. The Save mechanism is just one potential use-case.

But also, be mindful of overriding any browser behavior in the process as well. Users expect their browsers to behave in certain ways and to perform certain actions, such as typing "Ctrl + p" to print. Overriding that behavior could lead to a poor user experience.

Leave a comment

No messages posted yet
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

New articles published each week. Sign up for my newsletter and stay up to date.

Add a comment

Send me your weekly newsletter filled with awesome ideas
Post