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

Cela devrait fonctionner également dans chrome :

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

Answer 2

Comme il y a un scintillement lorsque vous utilisez setTimeout, il existe une autre solution basée sur les événements. De cette façon, l'événement 'focus' attache l'événement 'mouseup' et le gestionnaire d'événements se détache à nouveau.

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

Puis filer le premier événement

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

Answer 3

Si cela fonctionne pour le sélectionner dans IE, Firefox, Chrome, Safari et Opera, vous ne pourrez pas le modifier en cliquant une seconde fois dans Firefox, Chrome et Safari. Je ne suis pas tout à fait sûr, mais je pense que cela peut être dû au fait que ces 3 navigateurs ré-émettent un événement de focus même si le champ a déjà le focus, ce qui ne vous permet jamais d'insérer le curseur (puisque vous le sélectionnez à nouveau), alors que dans IE et Opera, il semble que cela ne se fasse pas, donc l'événement de focus n'est pas ré-émis et le curseur est inséré.

J'ai trouvé une meilleure solution dans ce billet de Stack qui n'a pas ce problème et fonctionne dans tous les navigateurs.

Answer 4

Essayez avec ça :

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

Answer 5

Si quelqu'un rencontre à nouveau ce problème, j'ai trouvé une solution purement JS qui fonctionne (pour le moment) sur tous les navigateurs, y compris les mobiles.

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

(sans setTimeout() cela ne fonctionne pas sur Safari, Safari mobile et MS Edge)