jQuery-seleccionar todo el texto de un área de texto

Question

jQuery-seleccionar todo el texto de un área de texto

¿Cómo puedo hacer que cuando haces clic dentro de un área de texto, se seleccione todo su contenido?

Y eventualmente cuando haga clic de nuevo, para deseleccionarlo.

121

forms javascript textarea jquery selection

Author: Alex, 2011-04-27

Source

6 answers

Mejor manera, con solución al problema de tab y chrome y nueva forma de jquery

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

14

Author: Matiesky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-20 13:17:39

Terminé usando esto:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

11

Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-26 23:32:46

Versión ligeramente más corta de jQuery:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Maneja la caja de esquina cromada correctamente. Véase http://jsfiddle.net/Ztyx/XMkwm / por ejemplo.

5

Author: Ztyx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-13 09:33:09

$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

5

Author: Phil LaNasa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-24 18:48:47

Seleccionar texto en un elemento (similar al resaltado con el ratón)

:)

Usando la respuesta aceptada en ese post, puedes llamar a la función así:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

4

Author: Todd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:33:16

score 184 · Accepted Answer

Para evitar que el usuario se moleste cuando se selecciona todo el texto cada vez que intenta mover el recuadro usando su mouse, debe hacerlo usando el evento focus, no el evento click. Lo siguiente hará el trabajo y solucionará un problema en Chrome que impide que la versión más simple (es decir, simplemente llamar al método select() de textarea en un controlador de eventos focus) funcione.

JsFiddle: http://jsfiddle.net/NM62A /

Código:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

JQuery versión:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});