Command + Enter para hacer submit a formularios

Utilizo Mac desde hace 6 años, pero no fue hasta que utilicé la aplicación cliente de Twitter llamada TweetDeck que me di cuenta de lo maravillosa que era la combinación de teclas [COMMAND] + [ENTER] y sobre todo de todo su potencial. ¿Estás dentro de un campo de texto? No te preocupes, utiliza la combinación de teclas [COMMAND] + [ENTER] y el formulario se enviará automáticamente, sin necesidad de hacer clic en el botón de Enviar formulario.

Esto, a mi me parece fantástico, es una vía rápida de enviar formularios para ahorrarnos unos cuantos clics. Eso sin contar los beneficios que tiene en la accesibilidad de nuestro sitio. Hay que tener en cuenta que, en la medida de lo posible, debemos ponérselo fácil a nuestro usuarios y si podemos simplificar pasos por el camino, pues mejor que mejor. Entonces, ¿cómo podemos implementar esto en nuestros futuros formulario con el fin de hacer un Internet mucho mejor? Pues con un poco de Javascript es posible, y en este artículo te mostramos cómo llevarlo a cabo. Atiende...

El Javascript

Tenemos dos maneras de hacerlo: añadiendo un listener de eventos al formulario o agregando un listener de eventos al área de texto. La mejor forma de hacerlo, bajo mi punto de vista, es hacerlo mediante la inserción de un listener en el propio formulario, debido a que un mismo formulario puede tener varios campos de texto y agregar un listener solo a un campo me parece que no es del todo funcional.

¿Qué pasaría entonces si el usuario ejecutase la combinación de teclas en otro campo que no es que nosotros hayamos integrado el listener? Pues que, obviamente, no funcionaría. Es por eso que la manera más práctica es modificando el formulario. De todas maneras he querido compartir con vosotros 3 vías de hacerlo, mediante el formulario, mediante el campo de texto y mediante el body de la web. Yo os he explicado mis razones, ahora seleccionad vosotros la que más os guste o mejor se adapte a los requisitos de vuestro proyecto:

// Asignandolo a un textarea
myTextarea.addEventListener('keydown', function(e) {
	if(e.keyCode == 13 && e.metaKey) {
		this.form.submit();
	}
});

// Asignandolo a un formulario
form.addEventListener('keydown', function(e) {
	if(!(e.keyCode == 13 && e.metaKey)) return;

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

// Asignandolo al body
document.body.addEventListener('keydown', function(e) {
	if(!(e.keyCode == 13 && e.metaKey)) return;

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

Tweetdeck utiliza la combinación de teclas [COMMAND] + [ENTER] al igual que GitHub en muchos de sus formularios. Naturalmente, he empezado a implementar por defecto en todos los formularios de mis proyectos esta combinación de teclas, lo siguiente que empezaré a implementar es el [ENTER] para pasar de campos en los formularios, ya os indicaré por aquí mis experimentos. Espero que os haya gustado este artículo y, como digo siempre, sepáis aplicarlo en vuestros futuros proyectos. Saludos y feliz código.