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

311

¿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?

Jon Erickson
fuente
Consulte también "Seleccionar texto enfocado usando jQuery que no funciona en Safari y Chrome" .
Gdoron está apoyando a Mónica el
3
@gdoron por alguna razón ese enlace redirige a esta pregunta en sí.
Destrictor
@Destrictor, sí, debería haber sido esto: "Seleccionar texto en foco usando jQuery no funciona en Safari y Chrome"
gdoron está apoyando a Mónica
El problema con la mayoría de estas soluciones es que no funcionan correctamente al cambiar la posición del cursor dentro del campo de entrada. Echa un vistazo a mi respuesta aquí: stackoverflow.com/a/20826207/641452
Colin Breame

Respuestas:

370
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
John Sheehan
fuente
23
También solo para información adicional: "input [type = text]" ahora puede ser "input: text" saludos
Ricardo Vega
8
Esto no parece funcionar para mí en Chrome y el sitio web jQuery dice que depende del navegador. ¿Alguien más puede verificar?
Kenny Wyland
71
Parece que los navegadores WebKit interfieren con esto debido al evento de mouseup. Agregué esto y funcionó: $ ('input: text'). Mouseup (function (e) {return false;});
Kenny Wyland
55
Kenny está en lo correcto, pero desafortunadamente 'mouseup' también afecta los controles de la ruleta Chrome. Disparar 'clic' en lugar de 'enfoque' parece resolver eso
Richard Kennard
24
Yo uso así: $ ("input: text"). Select (). Focus ();
Phuong
227

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

Zach
fuente
43
+ onmouseup = "return false" para detener la anulación de la selección al hacer clic
Anthony Johnston
2
+1 para algún tipo de stopEvent para mouseup, o esto no funciona de manera confiable. La desventaja de hacerlo es que una vez que el cursor está en el campo, hacer clic en algún lugar dentro del texto seleccionado para colocar el cursor allí no funciona; los clics están efectivamente deshabilitados. Aún así, para situaciones en las que es deseable seleccionar todo el texto en foco, es probable que sea el menor de dos males.
enigment
Pude solucionar el problema planteado por el enigment estableciendo una variable global doMouseUp en false, durante el evento onMouseDown, si esto! = Document.activeElement. Luego, durante onMouseUp, restablezca doMouseUp a verdadero y devuelva el valor de doMouseUp antes de restablecerlo. Esto se está volviendo complicado y necesita código: publicaré una respuesta explicándolo mejor.
Travis
1
NO agregue onmouseup="return false;"si desea que el usuario pueda seleccionar y editar libremente el texto después de enfocarse dentro del cuadro de texto. Con este código, el texto quedará bloqueado en una situación de "seleccionar todo" y el usuario no podrá editarlo a menos que el usuario escriba un texto nuevo o use las teclas de flecha para moverse. Honestamente, esto se siente como un comportamiento muy extraño y no tendría sentido a menos que el cuadro de texto no sea editable permanentemente (y, por lo tanto, esté deshabilitado).
ADTC
1
Técnicamente, no es necesario onmouseup="return false;"si simplemente desea que la selección que se produzca cuando el usuario primeros clics o pestañas. ¡Y +1 para el Javascript de vainilla!
clabe45
42
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
Tomás Kirda
fuente
3
Confirmado. La respuesta actual más votada / aceptada no parece funcionar para Chrome.
Aron Boyette
39
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
Yogesh Agrawal
fuente
1
Esto es bueno. ¡Gracias! El comentario enigmático a la respuesta de Zach da una desventaja de evitar el incumplimiento del mouseupevento: "una vez que el cursor está en el campo, hacer clic en algún lugar dentro del texto seleccionado para colocar el cursor allí no funciona; los clics están efectivamente desactivados. Sin embargo, para situaciones en las que es deseable seleccionar todo el texto en foco, probablemente sea el menor de dos males ".
JohnK
25

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

aaa
fuente
77
Tal vez esté bien si no te importa mezclar tu código y tu marcado; la mayoría de la gente trata de mantener su guión "discreto" hoy en día. Ah ... y jQuery es Javascript.
Andrew Barber
2
Gracias por la sugerencia de onclick, funciona muy bien. No todos usan jQuery, así que me alegra ver otra opción.
Lukus el
esto supone que los usuarios solo usan el mouse
pcnate
puede usar onfocus = "this.focus (); this.select ()" para teclado
Muhammad Nadeem
21

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.

Cizar
fuente
1
+1 por el uso de uno para evitar un solo mouseup. Realmente no me gustó no poder seleccionar texto con el mouse después del clic inicial.
Pluc
13

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()}
/>
Aniruddha Shevle
fuente
2
Esto funciona para mí en React:onFocus={(e) => e.target.select()}
Paito
11

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);
});
Jamie Pate
fuente
Esta es la solución que uso y prefiero. Uso un valor de tiempo de espera de 0 ya que eso hará que se agregue al final de la cola del evento actual, lo que significa que se ejecutará después del evento "mouseup".
DavidM
4

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>
usuario3296743
fuente
3

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 ...

H2Os
fuente
Nopes Estás dando una solución a un problema autogenerado. Si observa correctamente la respuesta, son vinculantes solo mouseuppara los campos de entrada de texto y no para numbers. Por lo tanto, este problema no debería surgir
Om Shankar
El problema con el mouseup vinculante es que interfiere al mover el cursor dentro del campo. Esta es una mejor solución, pero si tabula en el campo, se perderá el siguiente mousedown (y el usuario no podrá mover el cursor con el mouse). ¡Eso es mejor que perder todos los mousedowns!
Colin Breame
3

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.

Adithya Kumaranchath
fuente
3

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(); 
    });
});
low_rents
fuente
2

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.

Travis
fuente
Hay un error en su código: el segundo método debe llamarse "TextBoxMouseUp". Echa un vistazo a mi respuesta que utiliza un enfoque similar.
Colin Breame
1
Cabe señalar que onMouseUp=""y onMouseDown=""no son el estándar w3 correcto. Deberían ser onmouseup=""y onmousedown="". Al igual que con otros atributos html, deben escribirse en minúsculas y no en camello.
DrewT
2

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. :-)

Jonathan Gilbert
fuente
+1 Gracias, pero ¿cómo se puede volver a escribir esto para que no codifique el control 'txtCustomer' en el script? ¿Hay alguna manera de transmitir un objeto 'esto'?
Fandango68
Una forma sería crear una función de utilidad para aplicar el comportamiento a cualquier elemento, que se pasa como parámetro. Dentro de esa función, la referencia del elemento estaría codificada - al parámetro. Luego puede llamarlo a cualquier número de elementos de entrada, identificados por cualquier medio que tenga a su disposición. :-)
Jonathan Gilbert
Lo siento, soy un novato. ¿Podría actualizar su respuesta con un ejemplo? Gracias
Fandango68
1
Simplemente envuelva el código que escribí en una declaración de función que toma un parámetro llamado "txtCustomer". Recomiendo cambiar el nombre de "txtCustomer" a otra cosa, pero si no está seguro de hacerlo, técnicamente funcionará con la variable llamada "txtCustomer". Es decir: función MakeTextBoxAutoSelect (txtCustomer) { lo que escribí anteriormente }
Jonathan Gilbert
1
onclick="this.focus();this.select()"
Sourabh
fuente
1

¿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).

ADTC
fuente
1

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

 $("#textBox").focus().select();
Vijay Vepakomma
fuente
0
$('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.

Michael Tranchida
fuente
Explique su respuesta en lugar de simplemente pegar un código.
DavidG
0

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();
    });
});
DrewT
fuente
0

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.

Exel Gamboa
fuente
La pregunta no tiene ASP.NET en ningún lado. : |
Mohamed Thaufeeq
Es cierto, publiqué esto en caso de que el programador esté usando ASP.NET. Puede ser útil para alguien que busca una respuesta utilizando el marco (ya que esto me ayudó). Solo estoy compartiendo y espero que alguien lo encuentre útil.
Exel Gamboa
En caso de que el programador esté usando ASP.NET, agregará la etiqueta 'asp.net' a la pregunta. : |
Mohamed Thaufeeq
0

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

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

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);
        });
    }
});
Guillaume B.
fuente
Sí, pero si focustabulando en el campo, encontrará múltiples oyentes de eventos de mouseup adjuntando ...
Sebastian Scholle
-1

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

Mari
fuente