javascript - jQuery - seleccionar todo el texto de un textarea

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

Y eventualmente, cuando hagas clic de nuevo, para deseleccionarlo.

Respuesta #1

Para evitar que el usuario se sienta molesto cuando todo el texto se selecciona cada vez que intenta mover el cursor usando su mouse, deberías hacer esto usando el evento focus, no el evento click. Lo siguiente hará el trabajo y soluciona un problema en Chrome que impide que la versión más simple (es decir, simplemente llamar al método select() del textarea en un manejador 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>

Versión de jQuery:

$("#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;
    });
});

Respuesta #2

Mejor manera, con solución al problema de pestañas 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;
            });
        }
    });

Respuesta #3

Terminé usando esto:

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