entrada jquery seleccionar todo en foco

Estoy usando este código para intentar seleccionar todo el texto en el campo cuando un usuario se enfoca en el campo. Lo que sucede es que selecciona todo por un segundo, luego no está seleccionado y el cursor de escritura se deja donde hice clic ...

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

Quiero que todo quede seleccionado.

Intente usar en clicklugar de focus. Parece funcionar tanto para el mouse como para los eventos clave (al menos en Chrome / Mac):

jQuery <versión 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery versión 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Aquí hay una demostración

Creo que lo que pasa es esto:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Una solución alternativa puede ser llamar a select () de forma asincrónica, de modo que se ejecute completamente después de focus ():

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

Creo que esta es una mejor solución. A diferencia de simplemente seleccionar en el evento onclick, no impide seleccionar / editar texto con el mouse. Funciona con los principales motores de renderizado, incluido IE8.

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

http://jsfiddle.net/25Mab/9/

Aquí hay algunas respuestas decentes y la de @ user2072367 es mi favorita, pero tiene un resultado inesperado cuando te enfocas a través de la pestaña en lugar de hacer clic. (resultado inesperado: para seleccionar texto normalmente después del enfoque a través de la pestaña, debe hacer clic una vez más)

Este violín corrige ese pequeño error y, además, almacena $ (this) en una variable para evitar la selección de DOM redundante. ¡Echale un vistazo! (:

Probado en IE> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

Después de una revisión cuidadosa, propongo esto como una solución mucho más limpia dentro de este hilo:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Demostración en jsFiddle

El problema:

Aquí hay una pequeña explicación:

Primero, echemos un vistazo al orden de los eventos cuando coloca el mouse o la pestaña en un campo.
Podemos registrar todos los eventos relevantes como este:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

Nota : He cambiado esta solución para usarla en clicklugar de mouseupcomo sucede más adelante en la canalización del evento y parece estar causando algunos problemas en Firefox según el comentario de @ Jocie.

Algunos navegadores intentan colocar el cursor durante los eventos mouseupo click. Esto tiene sentido ya que es posible que desee iniciar el símbolo de intercalación en una posición y arrastrar para resaltar un texto. No puede hacer una designación sobre la posición del símbolo de intercalación hasta que haya levantado el mouse. Por lo tanto, las funciones que manejan focusestán destinadas a responder demasiado pronto, dejando que el navegador anule su posicionamiento.

Pero el problema es que realmente queremos manejar el evento de enfoque. Nos permite saber la primera vez que alguien ingresa al campo. Después de ese punto, no queremos seguir anulando el comportamiento de selección del usuario.

La solución:

En cambio, dentro del focuscontrolador de eventos, podemos adjuntar rápidamente oyentes para los eventos click(hacer clic) y keyup(tabular) que están a punto de activarse.

Nota : La tecla de un evento de tabulación se activará en el nuevo campo de entrada, no en el anterior.

Solo queremos disparar el evento una vez. Podríamos usar .one("click keyup), pero esto llamaría al controlador de eventos una vez para cada tipo de evento . En cambio, tan pronto como se presione el botón mouseup o keyup, llamaremos a nuestra función. Lo primero que haremos es eliminar los controladores de ambos. De esa manera no importará si usamos la pestaña o el mouse. La función debería ejecutarse exactamente una vez.

Nota : la mayoría de los navegadores seleccionan naturalmente todo el texto durante un evento de tabulación, pero como señaló animatedgif , aún queremos manejar el keyupevento, de lo contrario, el mouseupevento seguirá persistiendo en cualquier momento en que ingresemos. Escuchamos ambos para poder convertir fuera de los oyentes tan pronto como hayamos procesado la selección.

Ahora, podemos llamar select()después de que el navegador haya realizado su selección, por lo que estamos seguros de anular el comportamiento predeterminado.

Finalmente, para mayor protección, podemos agregar espacios de nombres de eventos a las funciones mouseupy keyuppara que el .off()método no elimine ningún otro detector que pueda estar en juego.

Probado en IE 10+, FF 28+ y Chrome 35+

Alternativamente, si desea extender jQuery con una función llamada onceque se activará exactamente una vez para cualquier número de eventos :

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Entonces puede simplificar el código aún más así:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Demo en violín

Esto haría el trabajo y evitaría el problema de que ya no puede seleccionar parte del texto con el mouse.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

Esta versión funciona en ios y también corrige la función de arrastrar para seleccionar estándar en Windows Chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

El problema con la mayoría de estas soluciones es que no funcionan correctamente cuando se cambia la posición del cursor dentro del campo de entrada.

El onmouseupevento cambia la posición del cursor dentro del campo, que se dispara después onfocus(al menos dentro de Chrome y FF). Si descarta incondicionalmente mouseup, el usuario no puede cambiar la posición del cursor con el mouse.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

El código evitará condicionalmente el mouseupcomportamiento predeterminado si el campo no tiene actualmente el foco. Funciona para estos casos:

• hacer clic cuando el campo no está enfocado
• haciendo clic cuando el campo tiene el foco
• tabulando en el campo

He probado esto en Chrome 31, FF 26 e IE 11.

Encontré una solución increíble leyendo este hilo

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

Vengo de finales de 2016 y este código simplemente funciona en versiones recientes de jquery (jquery-2.1.3.js en este caso).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

Estoy usando FF 16.0.2 y jquery 1.8.3, todo el código en la respuesta no funcionó.
Utilizo un código como este y trabajo.

$("input[type=text]").focus().select();

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

Use clearTimeout para mayor seguridad si cambia rápidamente entre dos entradas .. clearTimeout limpia el tiempo de espera anterior ...

Funciona muy bien con JavaScript nativo select().

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

o en general:

$("input[type=text]")[0].select()

O simplemente puede usar <input onclick="select()">Works perfect.

Puedes usar código simple:

$('#idname').select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Siempre uso requestAnimationFrame()para saltar sobre los mecanismos internos posteriores al evento y esto funciona perfectamente en Firefox. No lo he probado en Chrome.

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});