使用Control + S保存Web表单内容

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.

我们都使用过像Microsoft Word这样的文字处理应用程序，如果它们教会了您一件事，那就是您需要每隔几秒钟就保存下来，以免发生不可避免的崩溃。 WordPress在其所见即所得(WYSIWYG)编辑器中模仿了此功能，我经常使用它。 这是使用MooTools收听“ CONTROL + S”的方法。

View Demo 观看演示

HTML (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.

简单的形式-无需修改即可使用此功能。

MooTools JavaScript (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.

在keydown事件中，我们监听CONTROL + S(在Mac上为META + S)，如果键为“ s”，则触发表单提交。 我没有尝试向您展示AJAX方法，因为这种类型的系统将非常特定于您的数据库/服务器端语言。

View Demo 观看演示

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

疯狂，性感，酷酷，就像90年代的TLC一样！

翻译自: https://davidwalsh.name/control-save