La sélection de texte sur le focus avec jQuery ne fonctionne pas dans Safari et Chrome

Question

J'ai le code jQuery suivant (similaire à cette question ) qui fonctionne dans Firefox et IE, mais échoue (pas d'erreur, juste pas de fonctionnement) dans Chrome et Safari. Avez-vous une idée de solution de contournement ?

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

Answer 1

C'est l'événement onmouseup qui provoque la désélection de la sélection, il suffit donc d'ajouter :

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

Answer 2

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

Answer 3

Cela fonctionne bien pour les éléments input type="text". Quel type d'élément est #souper_fancy ?

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

Answer 4

Le fait d'empêcher la sélection par défaut lors du mouseup fait que la sélection de texte est activée à tout moment. L'événement MOUSEUP est chargé d'effacer la sélection de texte. Cependant, en empêchant son comportement par défaut, il est impossible de désélectionner le texte à l'aide de la souris.

Pour éviter cela et faire en sorte que la sélection de texte fonctionne à nouveau, vous pouvez définir un indicateur sur FOCUS, le lire depuis MOUSEUP et le réinitialiser afin que les futurs événements MOUSEUP fonctionnent comme prévu.

$("#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 5

Utilisez setSelectionRange() à l'intérieur d'un appel à 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;
    });
});

Utilisez setSelectionRange() au lieu de select() desde select() ne fonctionne pas dans le Safari mobile (voir Sélection programmée de texte dans un champ de saisie sur les appareils iOS (Safari mobile) ).

Il est nécessaire d'attendre en utilisant requestAnimationFrame avant de sélectionner le texte, sinon l'élément ne défile pas correctement dans la vue après l'apparition du clavier sur iOS.

Lorsque vous utilisez setSelectionRange() il est important de définir le type d'entrée sur text sinon il risque de lever des exceptions sur Chrome (voir selectionStart/selectionEnd on input type="number" n'est plus autorisé dans Chrome ).