javascript - seleccionar - Seleccione todos los contenidos del cuadro de texto cuando reciba el foco(Vanilla JS o jQuery)

select text javascript

Question

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

Answer 1

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

Solo necesitas agregar el siguiente atributo:

onfocus="this.select()"

Por ejemplo:

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

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

Answer 2

¡Siembra éste en algún lugar, funciona perfectamente!

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

Answer 3

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 evento de mouseup , pero no evitar que el usuario haga clic alrededor. 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 su clic. El manejo predeterminado aumenta el focus si es necesario y establece el inicio de selección.
• focus : como parte del manejo predeterminado de mousedown .
• mouseup : la finalización de su clic, cuya gestión predeterminada establecerá el final de la selección.

Cuando hace clic en una entrada de texto que ya tiene enfoque, el evento de focus se omite. Como @Travis y @Mari se dieron cuenta, el manejo predeterminado de mouseup debe evitarse solo si ocurre el evento de focus . Sin embargo, como no hay un evento de "no se realizó el focus ", debemos inferir esto, lo que podemos hacer dentro del controlador de mousedown .

La solución de @Mali requiere que jQuery sea importado, lo que quiero evitar. La solución de @ Travis hace esto inspeccionando document.activeElement . No sé por qué exactamente su solución no funciona en todos los navegadores, pero hay otra manera de saber si la entrada de texto tiene un enfoque: simplemente siga su focus y blur eventos.

Aquí está el código que me funciona:

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

Answer 4

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

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

Answer 5

Esto funcionará, prueba esto ...

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

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

Answer 6

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 aparición.

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

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

Answer 7

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

Answer 8

Las respuestas aquí me ayudaron hasta cierto punto, pero tuve un problema en los campos de entrada del número de 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á cambiando como si estuviera presionando el botón del mouse porque el mouseup se estaba tirando.

Resolví esto eliminando el controlador 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 la gente en el futuro ...

Answer 9

Llego tarde a la fiesta, pero esto funciona perfectamente en IE11, Chrome, Firefox, sin arruinar 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);
        });
    }
});

Answer 10

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, mouseup funcionará normalmente, pero no se anulará la selección después de obtener enfoque por entrada

Answer 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);
});

Answer 12

Nota: Si está programando en ASP.NET, puede ejecutar el script utilizando 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.

Answer 13

Pude mejorar ligeramente la respuesta de Zach mediante la incorporación de algunas llamadas de función. El problema con esa respuesta es que desactiva OnMouseUp completamente, lo que evita que hagas clic en el cuadro de texto una vez que se haya 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 sobre la respuesta de Zach. Funciona perfectamente en IE, no funciona en absoluto en Chrome, y funciona con éxito alterno en FireFox (literalmente cada dos veces). Si alguien tiene una idea de cómo hacer que funcione de manera confiable en FF o Chrome, compártala.

De todos modos, pensé en compartir lo que pudiera para hacer esto un poco mejor.

Answer 14

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>

Answer 15

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

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

Answer 16

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

Ejemplo:

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

Answer 17

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>

Desde CSS Trics .

Answer 18

HTML:

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

Utilizando JS:

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

Usando JQuery:

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

Utilizando React Js:

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

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

Answer 19

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

Answer 20

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

Edición: según la solicitud de @ DavidG, no puedo proporcionar detalles porque no estoy seguro de por qué esto 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 se ha recibido atención. Establecer el tiempo de espera le da al elemento un momento para darse cuenta de que está hecho.

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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