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

Question

Tengo el siguiente código jQuery (similar a this question) 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

Es el caso onmouseup que está causando la selección para obtener seleccionada, por lo que sólo tiene que añadir:

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

Answer 2

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

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

Answer 3

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

Answer 4

Aunque esto funciona para la selección en IE, Firefox, Chrome, Safari y Opera, no te permitirán editar 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 mejor solución in this Stack post que no tiene ese problema y funciona en todos los navegadores.

Answer 5

Esto debería funcionar también en cromo:

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

Answer 6

Sólo prevenir defecto en mouseup hace que la selección de texto a estar encendido 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 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); 
}); 

Answer 7

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

Después conecte el primer evento

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

Answer 8

Uso setSelectionRange() interior de una devolución de llamada a 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; 
    }); 
}); 

Uso setSelectionRange() en lugar de select()select() ya no funciona en Safari móvil (ver Programmatically selecting text in an input field on iOS devices (mobile Safari)).

Es necesario esperar usando requestAnimationFrame antes de seleccionar el texto, de lo contrario, el elemento no se desplazará correctamente a la vista después de 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 (consulte selectionStart/selectionEnd on input type="number" no longer allowed in Chrome).