Snippet JS para tabular en textarea

Función javascript para tabular en los campos de tipo textarea.

Eventos JavaScript

Tabular en un textarea es una tarea imposible sin el uso de javascript, ya que el corportamiento por defecto de esta tecla en una web es cambiar el focus de un input al siguiente en un formulario. Para lograr este objetivo suelo utilizar la siguiente función, que, usando una clase como query selector, permite tabular en todos los textareas de una página.

A continuación puedes ver el snippet que vigila la pulsación de la tecla tab en el interior de un textarea:

$('.tab-listener').keydown(function(e) {
 //para compatibilidad con navegadores recuperamos la tecla con keycode o which
  var keyCode = e.keyCode || e.which;

  if (keyCode == 9) { //código de la tecla tabular
    e.preventDefault(); 
  //recuperamos la posición del caracter en el que se situa el cursor
    var start = this.selectionStart;
    var end = this.selectionEnd;

    // componemos el contenido del texarea: texto anterior a la seleccion + tab + texto después de la selección
    $(this).val($(this).val().substring(0, start)
                + "\t"
                + $(this).val().substring(end));

    // volvemos a colocar el puntero dónde toca
    this.selectionStart = this.selectionEnd = start + 1;
  }
});

¿cómo tabulamos en el textarea con javascript?

Ahora voy a explicarte las claves de este snippet:

  1. En primer lugar hay que asignar la función al evento html keydown para cada uno de los textarea deseados, esto es esencial para poder comprobar cada una de las teclas que se han pulsado en el campo de texto en el que se escribe. Importante resaltar que he utilizado jQuery para asignar el evento.
  2. En segundo lugar es importante señalar que, para saber que se ha pulsado la tecla tabular en el interior del campo de texto, debemos recuperar el código de la tecla y comprobar que es el 9. Esto lo hacemos en las líneas 3 y 5.
  3. Una vez sabemos que el usuario ha pulsado la tecla tab en el textarea, detenemos la funcionalidad por defecto del evento con e.preventDefault(), así impedimos que el navegador salte al siguiente campo del formulario.
  4. Lo siguiente es almacenar la posición inicial y final de la selección del usuario (líneas 8 y 9) ya que puede haberse situando simplemente en un caracter o haber realizado una selección de texto y tabulado.
  5. Añadimos el caracter "\t", que es el encargado de tabular en html, justo en medio de la selección del usuario.
  6. Por último tenemos que dejar el cursor del usuario en la misma posición (start + 1). 

Por último te dejo una demostración en JSFiddle aquí.

Sobre el autor

Javier Gómez Redactor en Srcodigofuente.es

Javier Gómez

Ingeniero técnico en informática de gestión. Desarrollador web freelance y profesor de desarrollo web a partes iguales. Testarudo autodidacta, creativo, perfeccionista y alma libre.

Cargando comentarios

Utilizamos "cookies" para información estadística. Si continúas navegando aceptas su uso.