JSFiddle - React, Tailwind, and code Playground

by Javier Gómez

HTML

<input type="text" name="ejemplo1" />
<textarea id="texto" class="tab-listener" name="test"></textarea>
<textarea id="texto" class="tab-listener" name="test"></textarea>
<textarea id="texto" class="tab-listener" name="test"></textarea>

JavaScript

$('.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;
  }
});