Seleccione todo el contenido del cuadro de texto cuando reciba el foco (Vanilla JS o jQuery)

¿Qué es una solución Vanilla JS o jQuery que seleccionará todos los contenidos de un cuadro de texto cuando el cuadro de texto reciba el foco?

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQuery no es JavaScript, que es más fácil de usar en algunos casos.

Mira este ejemplo:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Fuente: CSS Tricks , MDN

Esto no es solo un problema de Chrome / Safari, experimenté un comportamiento bastante similar con Firefox 18.0.1. ¡La parte divertida es que esto no sucede en MSIE! El problema aquí es el primer evento de mouseup que obliga a deseleccionar el contenido de entrada, así que simplemente ignore la primera ocurrencia.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

El enfoque timeOut causa un comportamiento extraño, y al bloquear cada evento de mouseup no puede eliminar la selección haciendo clic nuevamente en el elemento de entrada.

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Usando JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Usando JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Usando React JS:

En el componente respectivo dentro de la función de renderizado -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

mi solución es usar un tiempo de espera. Parece funcionar bien

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Esto también funcionará en iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Sé que el código en línea es de mal estilo, pero no quería poner esto en un archivo .js. Funciona sin jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

Las respuestas aquí me ayudaron hasta cierto punto, pero tuve un problema en los campos de entrada de Número HTML5 al hacer clic en los botones arriba / abajo en Chrome.

Si hace clic en uno de los botones y deja el mouse sobre el botón, el número seguiría cambiando como si estuviera presionando el botón del mouse porque el mouseup se estaba descartando.

Resolví esto eliminando el controlador de mouseup tan pronto como se activó de la siguiente manera:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Espero que esto ayude a las personas en el futuro ...

Esto funcionará, prueba esto -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Funciona en Safari / IE 9 y Chrome, aunque no tuve la oportunidad de probar en Firefox.

Sé que ya hay muchas respuestas aquí, pero esta falta hasta ahora; Una solución que también funciona con contenido generado ajax:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

Pude mejorar ligeramente la respuesta de Zach al incorporar algunas llamadas a funciones. El problema con esa respuesta es que deshabilita onMouseUp por completo, evitando así que haga clic en el cuadro de texto una vez que está enfocado.

Aquí está mi código:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Esta es una ligera mejora con respecto a la respuesta de Zach. Funciona perfectamente en IE, no funciona en Chrome y funciona con éxito alternativo en FireFox (literalmente en cualquier otro momento). Si alguien tiene una idea de cómo hacer que funcione de manera confiable en FF o Chrome, compártala.

De todos modos, pensé que compartiría lo que pudiera para hacer esto un poco más agradable.

Al igual que @Travis y @Mari, quería seleccionar automáticamente cuando el usuario hizo clic, lo que significa evitar el comportamiento predeterminado de un mouseup evento, pero no evitar que el usuario haga clic. La solución que se me ocurrió, que funciona en IE11, Chrome 45, Opera 32 y Firefox 29 (estos son los navegadores que tengo instalados actualmente), se basa en la secuencia de eventos involucrados en un clic del mouse.

Cuando hace clic en una entrada de texto que no tiene foco, obtiene estos eventos (entre otros):

• mousedown: En respuesta a tu clic. Aumentos de manejo predeterminadosfocus si es necesario y establece el inicio de la selección.
• focus: Como parte del manejo predeterminado de mousedown.
• mouseup: La finalización de su clic, cuyo manejo predeterminado establecerá el final de la selección.

Cuando hace clic en una entrada de texto que ya tiene foco, focusse omite el evento. Como @Travis y @Mari notaron astutamente, el manejo predeterminado de las mouseupnecesidades debe evitarse solo si focusse produce el evento. Sin embargo, como no hay un focusevento "no sucedió", debemos inferir esto, lo que podemos hacer dentro del mousedowncontrolador.

La solución de @ Mari requiere que se importe jQuery, lo que quiero evitar. La solución de @ Travis hace esto mediante la inspección document.activeElement. No sé exactamente por qué su solución no funciona en todos los navegadores, pero no hay otra manera de realizar un seguimiento de si la entrada de texto tiene el foco: sólo tiene que seguir su focuseblur eventos.

Aquí está el código que funciona para mí:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Espero que esto sea de ayuda para alguien. :-)

onclick="this.focus();this.select()"

¿Qué es una solución de JavaScript o jQuery que seleccionará todo el contenido de un cuadro de texto cuando el cuadro de texto reciba el foco ?

Solo necesita agregar el siguiente atributo:

onfocus="this.select()"

Por ejemplo:

<input type="text" value="sometext" onfocus="this.select()">

(Honestamente, no tengo idea de por qué necesitarías algo más).

Esto funcionó para mí (publicar ya que no está en las respuestas sino en un comentario)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Editar: según la solicitud de @ DavidG, no puedo proporcionar detalles porque no estoy seguro de por qué funciona, pero creo que tiene algo que ver con el evento de enfoque que se propaga hacia arriba o hacia abajo o lo que sea que haga y el elemento de entrada que recibe la notificación Ha recibido el foco. Establecer el tiempo de espera le da al elemento un momento para darse cuenta de que lo ha hecho.

Si encadena los eventos juntos, creo que elimina la necesidad de usar .onecomo se sugiere en otra parte de este hilo.

Ejemplo:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

Nota: Si está programando en ASP.NET, puede ejecutar el script usando ScriptManager.RegisterStartupScript en C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

O simplemente escriba el script en la página HTML sugerida en las otras respuestas.

Siembro este en algún lugar, ¡funciona perfectamente!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

Llego tarde a la fiesta, pero esto funciona perfectamente en IE11, Chrome, Firefox, sin estropear el mouseup (y sin JQuery).

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

Mi solución es la siguiente:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Por lo tanto, el mouseup funcionará normalmente, pero no anulará la selección después de obtener el foco por entrada