Enviar datos de un formulario con ctrl y enter

En este artículo explicamos cómo enviar información de un formulario y desplegarla en una página mediante las teclas ctrl y enter, haciendo uso de jQuery para el manejo de eventos.

Es muy probable que durante tu navegación por la red, hayas notado que sitios como Facebook, Twitter y Google+, ponen a disposición del usuario una funcionalidad especial para poder enviar y mostrar información en sus páginas.

Generalmente, al momento de acceder al sitio, se nos presenta una caja de texto en la cual escribimos algún mensaje para después proceder a dar clic sobre el botón de envío. Esto se hace para que dicha información se muestre a nuestros contactos, pero en caso de querer agilizar este proceso, podemos hacer uso de un atajo alternativo, el cual consiste en aplastar las teclas ctrl y enter al mismo tiempo.

La razón por la que no podemos enviar la información con un simple enter, es porque estamos sobre un elemento textarea, y este permite al usuario añadir saltos de línea. Normalmente, la combinación de la tecla ctrl y enter, no produce algún comportamiento distinto, simplemente se ignora el ctrl y se añade un salto de línea nuevo, pero es ahí donde entramos nosotros.

En este artículo, explicaremos una manera muy sencilla de poder adaptar esta funcionalidad a nuestra página, utilizando HTML y un poco de jQuery para echar a andar todo.

Estructura HTML

Primero que nada necesitamos una estructura con la cual trabajar, para ello utilizaremos varios elementos HTML los cuales nos permitan desplegar un pequeño formulario el cual será llenado por el usuario.

Para no abrumarnos mucho hablando de CSS y HTML, simplemente pasaremos a mostrar el código final de la estructura:

    <style>  
      body {  
        font: 16px arial, san-serif;  
      }  
      #txtAreaMsj {  
        border: 1px solid #ccc;  
        display:block;  
        width: 250px;  
        height: 100px;  
      }  
      .parrafos {  
        border: 1px solid #ccc;  
        background: #ececec;  
        padding: 10px;  
        margin: 10px 0;  
        width: 230px;  
      }  
      #botonEnviar {  
        border: 1px solid #ccc;  
        background: #ececec;   
        padding: 5px 20px;  
        margin-top:10px;  
      }  
    </style>  

Por su parte, en el interior de nuestro elemento body añadiremos un textarea y un botón el cual nos permita enviar la información. En caso de hacer uso de la etiqueta form, la información puede ser enviada al lado servidor sin necesidad de utilizar JavaScript, pero como en este caso queremos hacer una vista dinámica, haremos uso de jQuery para el envío y manejo de la información. Por ello, también es necesario agregar la librería.

<textarea id = "txtAreaMsj "></textarea>  
<button id = "botonEnviar" type="submit">Enviar</button>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

JavaScript

Para facilitar el reusabilidad de esta funcionalidad, la encapsularemos en forma de plugin de jQuery. Le daremos el nombre de ctrlEnter y en un inicio lucirá de la siguiente manera:

jQuery.fn.ctrlEnter = function (botones, funcion) {  
  var texto   = jQuery(this);  
      botones = jQuery(botones);  
}; 

Como se puede apreciar, estamos haciendo uso de dos parámetros, el primero de ellos sirve para especificar un o una serie de selectores de jQuery, los cuales utilizaremos para definir que elementos deben llamar esta funcionalidad al dar clic sobre ellos. Por su parte, el segundo parámetro indica la función que se correrá cuando presionemos ambas teclas.

Además de esto, dentro de la estructura tenemos la definición de dos variables una para guardar el elemento textarea y la otra para el elemento que recibió el evento.

El siguiente paso es crear una función de ajuste, en la cual nos aseguraremos que la funcionalidad sea llama desde el elemento textarea.

function realizaAccion(e) {  
  fn.call(texto, e);  
} 

Lo que sigue, es manejar los controladores de eventos para mandar llamar la función cuando realmente se necesite. Los eventos de los que haremos uso, son keydown en el texto y click en el botón.

texto.bind("keydown", function (e) {  
  if (e.keyCode === 13 && e.ctrlKey) {  
    realizaAccion(e);  
    e.preventDefault();  
  }  
});  
botones.bind("click", realizaAccion);

Con este código, al momento que el usuario presione las dos teclas al mismo tiempo o se de clic sobre el botón, se mandará llamar la función “realizaAccion”. El código de la tecla enter es 13 mientras que la variable ctrlKey nos devuelve un valor booleano que es verdadero cuando la tecla ctrl esta presionada, es por eso que combinamos ambas sentencias dentro de una condición, la cual nos indicará cuando ambas fueron presionadas. Por su parte la misma función es llamada desde el botón para asi asegurarnos de que se realizan las mismas acciones desde los dos medios.

Dentro del código, también agregamos una llamada a “e.preventDefault”, este método permite omitir la funcionalidad por default de las teclas, por lo que la acción para agregar un salto de línea se omite.

El paso final seria conectar el código del manejo de eventos con los botones que tenemos en la interfaz, podemos añadir una funcionalidad extra para quitar caracteres no deseados o sustituir los saltos de línea por etiquetas “br”, para así agregar el texto al div contenedor.

    jQuery("#msg").ctrlEnter("#botonEnviar", function () {  
      jQuery("<p class='parrafos'></p>").append(this.val().replace(/\n/g, "<br />")).prependTo(document.body);  
      this.val("");  
    });