David Walsh Blog

Save Web Form Content Using Control + S

We’ve all used word processing applications like Microsoft Word and if there’s one thing they’ve taught you it’s that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it frequently. Here’s how to listen for “CONTROL+S” using MooTools.


<form method="post" id="edit-form">
<textarea style="width:400px;height:250px;" name="content" id="content-box"><?php echo $_POST['content']; ?></textarea><br />
<input type="submit" id="save-button" value="Save and Continue" />

A simple form — no modifications needed for this functionality to work.

The MooTools JavaScript

(function($) {
	window.addEvent('domready',function() {
		$('content-box').addEvent('keydown',function(event) {
			if((event.control || event.meta) && event.key == 's') {

On the keydown event we listen for CONTROL+S (or META+S on Macs) and if the key is “s”, we trigger form submission. I’ve not attempted to show you the AJAX method because that type of system would be very specific to your database/server-side language.

Crazy, sexy, cool, just like TLC from the 90’s!