Cómo manejar en el área de texto?

7 minutos de lectura

Como manejar en el area de
sergzach

Quisiera un textarea que maneje una situación de presionar pestaña llave.

En el caso predeterminado, si presiona un pestaña key luego el foco sale del área de texto. Pero, ¿qué pasa con la situación cuando el usuario quiere escribir? pestaña clave en el área de texto?

¿Puedo capturar este evento y devolver el foco al área de texto y agregar una pestaña a un Actual posición del cursor?

  • Posible duplicado de la pestaña Usar para sangrar en el área de texto

    – Padre

    02 ene.

  • Revisé algunas de las respuestas existentes y todas se quedan cortas de alguna manera (sin deshacer, bajo rendimiento, selección incorrecta después de eliminar la sangría). Recientemente escribí un pequeño módulo que maneja esto correctamente, llamado indent-textarea

    – fregante

    15 dic. 19 en 21:07

Como manejar en el area de
pimvdb

Usted puede: http://jsfiddle.net/sdDVf/8/.


$("textarea").keydown(function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "t"
                    + value.substring(end));

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
});

  • @Amine: para evitar la función de pestaña predeterminada del navegador. Ahora veo que no es necesario. Voy a tener una búsqueda sobre esto. EDITAR: return false parece incluir preventDefault: stackoverflow.com/questions/1357118/….

    – pimvdb

    26 mayo 2011 en 15:01


  • También se implementó la sobrescritura de selección.

    – pimvdb

    27 mayo 2011 en 16:12

  • @sergzach: Mi solución no funciona en absoluto en IE8, porque no es compatible selectionStart/selectionEnd. Tendrías que crear rangos de texto, pero todavía no entiendo cómo funciona eso, me temo…

    – pimvdb

    05 jul.

  • Esto frena la función de deshacer de los navegadores (Ctrl+z)

    – 01AutoMonkey

    23 mar. 17 a las 19:49


  • No estoy seguro de cómo/por qué se perdió esto, en la última llamada de subcadena comienzo se debe dar como primer argumento: + value.substring(start, end)); — De lo contrario, al seleccionar texto, se borra el texto.

    – Asaf

    22 mayo 2017 en 15:10


Aquí hay una versión modificada de la respuesta de pimvdb que no necesita JQuery:

document.querySelector("textarea").addEventListener('keydown',function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var target = e.target;
        var value = target.value;

        // set textarea value to: text before caret + tab + text after caret
        target.value = value.substring(0, start)
                    + "t"
                    + value.substring(end);

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
},false);

Lo probé en Firefox 21.0 y Chrome 27. No sé si funciona en otro lugar.

  • Para aplicar esto a todas las áreas de texto, use querySelectorAll, enumere la lista devuelta y agregue el detector de eventos a cada elemento.

    –Jeffrey LeCours

    17 sep.


  • Para que este enfoque funcione, debe adjuntar el eventListener a individual elementos DOM. Para hacer eso: 1) obtener todos los elementos document.querySelectorAll("textarea") 2) recorrer la matriz para adjuntar el detector de eventos a cada elemento. Entonces debería funcionar

    – Amjad

    20 feb. 18 en 11:48


  • Rompe la funcionalidad de deshacer como la respuesta aceptada.

    – Daniel

    26 mayo 2018 en 18:49

1641925617 472 Como manejar en el area de
orwellófilo

Dios mío, todas las respuestas anteriores no proporcionaron el control de pestañas comúnmente decente (es decir, para programadores).

Es decir, un golpe PESTAÑA en la selección de líneas sangrará esas líneas, y CAMBIOPESTAÑA los quitará la sangría.

_editado (noviembre de 2016): keyCode reemplazado por charCode || código clave, por KeyboardEvent.charCode: API web | MDN

(function($) {
  $.fn.enableSmartTab = function() {
    var $this;
    $this = $(this);
    $this.keydown(function(e) {
      var after, before, end, lastNewLine, changeLength, re, replace, selection, start, val;
      if ((e.charCode === 9 || e.keyCode === 9) && !e.altKey && !e.ctrlKey && !e.metaKey) {
        e.preventDefault();
        start = this.selectionStart;
        end = this.selectionEnd;
        val = $this.val();
        before = val.substring(0, start);
        after = val.substring(end);
        replace = true;
        if (start !== end) {
          selection = val.substring(start, end);
          if (~selection.indexOf('n')) {
            replace = false;
            changeLength = 0;
            lastNewLine = before.lastIndexOf('n');
            if (!~lastNewLine) {
              selection = before + selection;
              changeLength = before.length;
              before="";
            } else {
              selection = before.substring(lastNewLine) + selection;
              changeLength = before.length - lastNewLine;
              before = before.substring(0, lastNewLine);
            }
            if (e.shiftKey) {
              re = /(n|^)(t|[ ]{1,8})/g;
              if (selection.match(re)) {
                start--;
                changeLength--;
              }
              selection = selection.replace(re, '$1');
            } else {
              selection = selection.replace(/(n|^)/g, '$1t');
              start++;
              changeLength++;
            }
            $this.val(before + selection + after);
            this.selectionStart = start;
            this.selectionEnd = start + selection.length - changeLength;
          }
        }
        if (replace && !e.shiftKey) {
          $this.val(before + 't' + after);
          this.selectionStart = this.selectionEnd = start + 1;
        }
      }
    });
  };
})(jQuery);

$(function() {
  $("textarea").enableSmartTab();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="10" cols="80">
/* Just some code to edit with our new superTab */
(function($) {
    $.fn.enableSmartTab = function() {
        $this = $(this);
        $this.keydown(function(e) {
            if ((e.charCode === 9 || e.keyCode === 9) && !e.metaKey && !e.ctrlKey && !e.altKey) {
                e.preventDefault();
            }
        }
    }
}
</textarea>

  • acabo de escribir mi código para lograr esta función. En circunstancias en las que no debe usar jQuery, considere usar mi código.

    – Константин Ван

    19 nov.

  • @ K._ buen código, pero recomendaría ejecutarlo a través del cierre de babel o google para eliminar los componentes de ES6. ES6 es genial, pero hay demasiados usuarios que no usan navegadores compatibles con ES6. también event.key no es (IIRC) consistente en todos los navegadores, las claves pueden llamarse cosas diferentes en diferentes navegadores, y Safari no admite la propiedad en absoluto. Este es el otro La razón por la que la gente usa jQuery, aunque a menudo se olvida, es para garantizar la compatibilidad entre navegadores. No estoy criticando tus esfuerzos, creo que hiciste un gran trabajo, pero tiene que funcionar en todos los navegadores.

    – Orwellófilo

    20 nov.


  • @ K._ si observa el código que escribí, en realidad no hay mucho jQuery allí. Excluyendo la adición del oyente, el único uso real de jQuery es $.fn.val. El controlador en sí ya usa propiedades de eventos nativos.

    – Orwellófilo

    20 nov.


  • ¿Qué significa ~ y !~?

    – 1,21 gigavatios

    23 feb. 19 a las 4:07

  • @ 1.21 gigavatios es el operador no bit a bit, hay una explicación bastante buena de por qué se usa aquí aquí

    – peabrainiac

    17 oct.


1641925617 925 Como manejar en el area de
Marcos

En Vanilla (Predeterminado) JS esto sería:

var textareas = document.getElementsByTagName('textarea');

if ( textareas ) {
  for ( var i = 0; i < textareas.length; i++ ) {
textareas[i].addEventListener( 'keydown', function ( e ) {
  if ( e.which != 9 ) return;

  var start             = this.selectionStart;
  var end                 = this.selectionEnd;

  this.value            = this.value.substr( 0, start ) + "t" + this.value.substr( end );
  this.selectionStart = this.selectionEnd = start + 1;

  e.preventDefault();
  return false;
});
  }
}
textarea {
   border: 1px solid #cfcfcf;
   width: 100%;
   margin-left: 0px;
   top: 0px;
   bottom: 0px;
   position: absolute;
}
<textarea>
var x = 10;
var y = 10;
</textarea>

Habilitar tabulación dentro de (múltiples) elementos de área de texto

Corrigiendo la respuesta de @alexwells y habilitando una demostración en vivo

var textAreaArray = document.querySelectorAll("textarea");
    for (var i = textAreaArray.length-1; i >=0;i--){
        textAreaArray[i].addEventListener('keydown',function(e) {
            if(e.keyCode === 9) { // tab was pressed
                // get caret position/selection
                var start = this.selectionStart;
                var end = this.selectionEnd;

                var target = e.target;
                var value = target.value;

                // set textarea value to: text before caret + tab + text after caret
                target.value = value.substring(0, start)
                            + "t"
                            + value.substring(end);

                // put caret at right position again (add one for the tab)
                this.selectionStart = this.selectionEnd = start + 1;

                // prevent the focus lose
                e.preventDefault();
            }
        },false);
    }
<textarea rows="10" cols="80"></textarea>
   <textarea rows="10" cols="80"></textarea>

  • Uso de javascript de vainilla para habilitar el tabulado dentro de los elementos del área de texto

    – Amjad

    20 feb.

Encontré esto mientras buscaba en Google. Hice uno muy corto que también puede aplicar sangría y sangría inversa a las selecciones de texto:

    jQ(document).on('keydown', 'textarea', function(e) {
        if (e.keyCode !== 9) return;
        var Z;
        var S = this.selectionStart;
        var E = Z = this.selectionEnd;
        var A = this.value.slice(S, E);
        A = A.split('n');
        if (!e.shiftKey)
            for (var x in A) {
                A[x] = 't' + A[x];
                Z++;
            }
        else
            for (var x in A) {
                if (A[x][0] == 't')
                    A[x] = A[x].substr(1);
                Z--;
            }
        A = A.join('n');
        this.value = this.value.slice(0, S) + A + this.value.slice(E);
        this.selectionStart = S != E ? S : Z;;
        this.selectionEnd = Z;
        e.preventDefault();
    });

  • Uso de javascript de vainilla para habilitar el tabulado dentro de los elementos del área de texto

    – Amjad

    20 feb.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad