javascript - Seleccionar todo el contenido del cuadro de texto cuando recibe el foco (Vanilla JS o jQuery)

¿Cuál es una solución en Vanilla JS o jQuery que seleccione todo el contenido de un cuadro de texto cuando el cuadro de texto recibe el foco?

Respuesta #1

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

Respuesta #2

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

Respuesta #3

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

Respuesta #4

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

Respuesta #5

jQuery no es JavaScript, el cual 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

Respuesta #6

HTML :

document.getElementById("text-filled").addEventListener("focus", function() { this.select(); });

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

Usando JQuery :

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

Usando React JS :

En el componente respectivo -

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

Respuesta #7

Esto no es solo un problema de Chrome/Safari, experimenté un comportamiento bastante similar con Firefox 18.0.1. Lo curioso es que esto no ocurre en MSIE. El problema aquí es el primer evento mouseup que obliga a deseleccionar el contenido del input, así que simplemente ignora la primera ocurrencia.

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

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

Respuesta #8

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