Save Web Form Content Using Control + S

By  on  

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.

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.

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

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

  • By
    Duplicate the jQuery Homepage Tooltips Using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  1. kolin

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

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

  3. 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.

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

  5. 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!

  6. @kolin: Yes, i cameto mention it ;)

    Good work!
    recently i just saw in Hotmail.

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

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

  9. Alexander

    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?

  10. hei david can you write for JQuery…?

  11. Nikolaj

    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:

    (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);
    

    Important: The small delay IS needed in order to make it work as expected!

  12. @Nikolaj: Great catch! I’ve updated my demo.

  13. Great Idea, David!
    Fantastic Website, i like the Tutorials & Demos.

    Great job!

    Best regards, MrKenobi

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!