Save Web Form Content Using Control + S

Written by David Walsh on Wednesday, October 14, 2009

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.

View Demo

The HTML

<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" />
</form>

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') {
				event.stop();
				$('edit-form').submit();
			}
		});
	});
})(document.id);

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.

View Demo

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

Download PDF

Follow via RSS Epic Discussion

October 14 / #

kolin says:

firefox 3.5.3 brings up the save page dialog (as well as saving), but nice idea :)

October 14 / #

David Walsh says:

Confirmed on Windows Firefox. I’ll look for patch. WYSIWYG’s do this so I’m confident there’s a way to prevent it.

October 14 / #

Dominik Porada says:

Preventing browser’s default behavior is really bad thing to do if you care about usability.

Anyway, it’s a nice example of enhancing user experience using MooTools—you obviously don’t have to use ⌘+S combination, but it could be anything else.

October 14 / #

Adriaan says:

This would be really awesome if you could override firefox’s default behaviour!

October 14 / #

derschreckliche says:

Thank you very much for this post.
I always wanted to know how to handle keyboard events in mootools and this is an excellent example!

October 14 / #

Mohammad Rashidi says:

@kolin: Yes, i cameto mention it ;)

Good work!
recently i just saw in Hotmail.

October 15 / #

Ben says:

Alt+S Perhaps, that’s teh way I see it done usually.

October 15 / #

Savageman says:

Why not use the brand new Keyboard functionnality from Mootools More?

October 15 / #

Alexander says:

I’ve got about 50 to 100 textareas on my page and a lot of input fields. Is there a way to attach the key down event to the page and not as suggested to every single input element?

October 17 / #

Ipan Apasia says:

hei david can you write for JQuery…?

October 28 / #

Nikolaj says:

David, it looks like it’s the alert-box that causes Firefox to fail.

Either get rid of the alert(), or simply put the alert/saving part into a function with delay(1), and it will work as expected :-)

Updated code:
[code]
(function($) {
window.addEvent('domready',function() {
$('content-box').focus();
$('content-box').addEvent('keydown',function(event) {
if((event.control || event.meta) && event.key == 's') {
event.stop();
(function () {
alert('Saving Content!');
//$('save-button').fireEvent('click');
$('edit-form').submit();
}).delay(1);
}
});
});
})(document.id);
[/code]