jquery - tabla - copy portapapeles javascript

Seleccionar texto en el enfoque usando jQuery no funciona en Safari y Chrome

Question

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

Answer 1

Debido a que parpadea cuando usa setTimeout, hay otra solución basada en eventos. De esta forma, el evento ''focus'' asocia el evento ''mouseup'' y el manejador de eventos se separa de nuevo.

    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 conecte el primer evento

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

Answer 2

Es el evento onmouseup lo que está causando que la selección no sea seleccionada, por lo que solo debes agregar:

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

Answer 3

Esto debería funcionar también en chrome:

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

Answer 4

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

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

Answer 5

La simple prevención del valor predeterminado en el mouseup provoca 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 anular la selección del texto con el mouse.

Para evitar eso y hacer que la selección de texto funcione nuevamente, puede establecer un indicador en FOCUS, leerlo de MOUSEUP y restablecerlo para que los futuros eventos 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);
});

Answer 6

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 los 3 navegadores reeditan un evento de enfoque a pesar de que el campo ya tiene foco y nunca te permite insertar el cursor (ya que lo estás seleccionando de nuevo), mientras que en IE y Opera parece que no está haciendo eso, por lo que el evento de enfoque no se activó nuevamente y, por lo tanto, el cursor se inserta.

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

Answer 7

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

Utilice setSelectionRange() lugar de select() ya que select() 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 utilizando requestAnimationFrame antes de seleccionar el texto; de lo contrario, el elemento no se desplazará correctamente a la vista una vez que el teclado aparezca en iOS.

Al usar setSelectionRange() es importante establecer el tipo de entrada en text , de lo contrario puede arrojar excepciones en Chrome (ver selectionStart / selectionEnd en input type = "number" ya no está permitido en Chrome ).

Answer 8

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