Command + Enter pro odeslání formuláře

Používám Mac už asi šest let, ale teprve když jsem začal používat Tweetdeck, uvědomil jsem si, jak úžasné je [COMMAND]+[ENTER] kombinace kláves byla. Uvnitř textové oblasti? Žádný problém -- [COMMAND]+[ENTER] a formulář je odeslán. Co kdyby všechny formy mohly být takové? Mohou být s trochou JavaScriptu!

JavaScript

Existují dvě cesty: přidání posluchače události do formuláře (delegát události) nebo použití posluchače události na konkrétní prvky textové oblasti. Bezpečnější cestou je delegování událostí, protože dynamické formuláře mohou mít kdykoli přidáno mnoho textových oblastí, ale přiřazení podle textových oblastí je mnohem efektivnější. Nakonec je na vývojáři, aby znal jejich podobu. Zde jsou tři ukázky kódu, které umožňují odeslání formuláře různými způsoby:

// Assign to individual textarea (most efficient)
myTextarea.addEventListener('keydown', function(e) {
	if(e.keyCode == 13 && e.metaKey) {
		this.form.submit();
	}
});

// Form event delegation - individual form (somewhat efficient)
form.addEventListener('keydown', function(e) {
	if(!(e.keyCode == 13 && e.metaKey)) return;

	var target = e.target;
	if(target.form) {
		target.form.submit();
	}
});

// Body event delegation - any form (least efficient)
document.body.addEventListener('keydown', function(e) {
	if(!(e.keyCode == 13 && e.metaKey)) return;

	var target = e.target;
	if(target.form) {
		target.form.submit();
	}
});

Tweetdeck používá [COMMAND]+[ENTER] stejně jako GitHub na některých jejich formulářích. Přirozeně jsem začal hledat tuto kombinaci klávesových příkazů místo toho, abych přešel na pole, které odešle formulář pomocí tradičního [ENTER] klíč.