Seleccionar texto en foco usando jQuery no funciona en Safari y Chrome

Tengo el siguiente código jQuery (similar a esta pregunta ) que funciona en Firefox e IE, pero falla (no hay errores, simplemente no funciona) en Chrome y Safari. ¿Alguna idea para una solución alternativa?

$("#souper_fancy").focus(function() { $(this).select() });

Es el evento onmouseup el que está provocando que la selección no se seleccione, por lo que solo necesita agregar:

$("#souper_fancy").mouseup(function(e){
    e.preventDefault();
});

$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});

Esto funciona bien para elementos input type = "text". ¿Qué tipo de elemento es #souper_fancy?

$("#souper_fancy").focus(function() {
    $(this).select();
});

El solo hecho de evitar el valor predeterminado al mover el mouse hacia arriba hace que la selección de texto esté ACTIVADA en todo momento. El evento MOUSEUP es responsable de borrar la selección de texto. Sin embargo, al evitar su comportamiento predeterminado, no puede deseleccionar el texto con el mouse.

Para evitar eso y hacer que la selección de texto vuelva a funcionar, puede establecer una marca en FOCUS, leerla desde MOUSEUP y restablecerla para que los eventos futuros de MOUSEUP funcionen como se esperaba.

$("#souper_fancy").focus(function() {
    $(this).select();

    //set flag for preventing MOUSEUP event....
    $this.data("preventMouseUp", true);
});

$("#souper_fancy").mouseup(function(e) {
    var preventEvent = $this.data("preventMouseUp");

    //only prevent default if the flag is TRUE
    if (preventEvent) {
        e.preventDefault();
    }

    //reset flag so MOUSEUP event deselect the text
    $this.data("preventMouseUp", false);
});

Si bien esto funciona para seleccionarlo en IE, Firefox, Chrome, Safari y Opera, no le permitirá editarlo haciendo clic por segunda vez en Firefox, Chrome y Safari. No del todo seguro, pero creo que esto puede deberse a que esos 3 navegadores vuelven a emitir un evento de enfoque a pesar de que el campo ya tiene el enfoque, por lo que nunca le permite insertar el cursor (ya que lo está seleccionando nuevamente), mientras que en IE y Opera parece que no está haciendo eso, por lo que el evento de enfoque no se disparó nuevamente y, por lo tanto, el cursor se inserta.

Encontré una mejor solución en esta publicación de Stack que no tiene ese problema y funciona en todos los navegadores.

Esto debería funcionar también en Chrome:

$("#souper_fancy").focus(function() {
    var tempSouper = $(this);
    setTimeout(function(){
        tempSouper.select();
    },100);
});

Debido a que hay parpadeo cuando usa setTimeout, hay otra solución basada en eventos. De esta manera, el evento 'focus' adjunta el evento 'mouseup' y el controlador de eventos se desconecta nuevamente.

    function selectAllOnFocus(e) {
    if (e.type == "mouseup") { // Prevent default and detach the handler
        console.debug("Mouse is up. Preventing default.");
        e.preventDefault();
        $(e.target).off('mouseup', selectAllOnFocus);
        return;
    }
    $(e.target).select();
    console.debug("Selecting all text");
    $(e.target).on('mouseup', selectAllOnFocus);
}

Luego cablee el primer evento

    $('.varquantity').on('focus', selectAllOnFocus);

Usar setSelectionRange()dentro de una devolución de llamada para requestAnimationFrame():

$(document).on('focus', '._selectTextOnFocus', (e) => {
    var input = e.currentTarget;
    var initialType = e.currentTarget.type;

    requestAnimationFrame(() => {
        // input.select() is not supported on iOS
        // If setSelectionRange is use on a number input in Chrome it throws an exception,
        // so here we switch to type text first.
        input.type = "text";
        input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999);
        input.type = initialType;
    });
});

Usar en setSelectionRange()lugar de select()ya select()que no funciona en Safari móvil (consulte Seleccionar texto mediante programación en un campo de entrada en dispositivos iOS (Safari móvil) ).

Es necesario esperar a usar requestAnimationFrameantes de seleccionar el texto; de lo contrario, el elemento no se desplazará correctamente a la vista después de que aparezca el teclado en iOS.

Al usarlo setSelectionRange(), es importante establecer el tipo de entrada en text, de lo contrario, puede generar excepciones en Chrome (consulte selectionStart / selectionEnd en input type = "number" ya no se permite en Chrome ).

Si alguien se encuentra nuevamente con este problema, obtuve aquí una solución JS pura que (en este momento) funciona en todos los navegadores, incl. móvil

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

(sin setTimeout () no funciona en Safari, Safari móvil y MS Edge)