entrée jquery sélectionner tout sur focus

J'utilise ce code pour essayer de sélectionner tout le texte dans le champ lorsqu'un utilisateur se concentre sur le champ. Ce qui se passe, c'est qu'il sélectionne tout pendant une seconde, puis il n'est pas sélectionné et le curseur de frappe est laissé là où j'ai cliqué ...

$("input[type=text]").focus(function() {
   $(this).select();
});

Je veux que tout reste sélectionné.

Essayez d'utiliser clickau lieu de focus. Il semble fonctionner à la fois pour la souris et les événements clés (au moins sur Chrome / Mac):

jQuery <version 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery version 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Voici une démo

Je pense que ce qui se passe est le suivant:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Une solution de contournement peut appeler le select () de manière asynchrone, afin qu'il s'exécute complètement après focus ():

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

Je pense que c'est une meilleure solution. Contrairement à la simple sélection dans un événement onclick, cela n'empêche pas la sélection / modification de texte avec la souris. Il fonctionne avec les principaux moteurs de rendu, notamment IE8.

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

Il y a des réponses décentes ici et @ user2072367 est ma préférée, mais elle a un résultat inattendu lorsque vous vous concentrez via l'onglet plutôt que via le clic. (résultat inattendu: pour sélectionner le texte normalement après la mise au point via l'onglet, vous devez cliquer une fois de plus)

Ce violon corrige ce petit bogue et stocke en outre $ (ceci) dans une variable pour éviter la sélection DOM redondante. Vérifiez-le! (:

Testé dans IE> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

Après un examen attentif, je propose cela comme une solution beaucoup plus propre dans ce fil:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Démo dans jsFiddle

Le problème:

Voici quelques explications:

Tout d'abord, jetons un œil à l'ordre des événements lorsque vous passez la souris ou tabulez dans un champ.
Nous pouvons enregistrer tous les événements pertinents comme celui-ci:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

Remarque : j'ai changé cette solution pour l'utiliser clickplutôt que mouseupcomme cela se produit plus tard dans le pipeline d'événements et semble causer des problèmes dans Firefox selon le commentaire de @ Jocie

Certains navigateurs tentent de positionner le curseur pendant les événements mouseupou click. Cela est logique, car vous souhaiterez peut-être démarrer le curseur dans une position et le faire glisser pour mettre du texte en surbrillance. Il ne peut pas faire de désignation sur la position du curseur tant que vous n'avez pas levé la souris. Les fonctions qui gèrent focussont donc destinées à répondre trop tôt, laissant le navigateur remplacer votre positionnement.

Mais le hic, c'est que nous voulons vraiment gérer l'événement focus. Il nous permet de savoir la première fois que quelqu'un est entré sur le terrain. Après ce point, nous ne voulons pas continuer à remplacer le comportement de sélection des utilisateurs.

La solution:

Au lieu de cela, dans le focusgestionnaire d'événements, nous pouvons rapidement attacher des écouteurs pour click(cliquer) etkeyup événements (tabuler) qui sont sur le point de se déclencher.

Remarque : La saisie d'un événement de tabulation sera en fait déclenchera dans le nouveau champ de saisie, pas le précédent

Nous ne voulons déclencher l'événement qu'une seule fois. Nous pourrions utiliser .one("click keyup), mais cela appellerait le gestionnaire d'événements une fois pour chaque type d'événement . Au lieu de cela, dès que la souris ou la touche est enfoncée, nous appelons notre fonction. La première chose que nous ferons est de supprimer les gestionnaires pour les deux. De cette façon, peu importe que nous tabulions ou que nous entrions dans la souris. La fonction devrait s'exécuter exactement une fois.

Remarque : La plupart des navigateurs sélectionnent naturellement tout le texte lors d'un événement de tabulation, mais comme animatedgif l'a souligné , nous voulons toujours gérer l' keyupévénement, sinon lemouseup événement persistera à chaque fois que nous y tabulerons. Nous écoutons les deux afin de pouvoir tourner hors des auditeurs dès que nous avons traité la sélection.

Maintenant, nous pouvons appeler select() après que le navigateur a fait sa sélection, donc nous sommes sûrs de remplacer le comportement par défaut.

Enfin, pour une protection supplémentaire, nous pouvons ajouter des espaces de noms d'événements aux fonctions mouseupet keyupafin que la .off()méthode ne supprime aucun autre écouteur qui pourrait être en jeu.

Testé dans IE 10+, FF 28+ et Chrome 35+

Alternativement, si vous souhaitez étendre jQuery avec une fonction appelée oncequi se déclenchera exactement une fois pour un certain nombre d'événements :

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Ensuite, vous pouvez simplifier davantage le code comme ceci:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Démo au violon

Cela ferait le travail et éviterait le problème que vous ne pouvez plus sélectionner une partie du texte avec la souris.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

Cette version fonctionne sur iOS et corrige également le glisser-sélectionner standard sur Windows Chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

Le problème avec la plupart de ces solutions est qu'elles ne fonctionnent pas correctement lors du changement de position du curseur dans le champ de saisie.

L' onmouseupévénement modifie la position du curseur dans le champ, qui est déclenché après onfocus(au moins dans Chrome et FF). Si vous supprimez inconditionnellement le, mouseupl'utilisateur ne peut pas modifier la position du curseur avec la souris.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

Le code empêchera conditionnellement le mouseupcomportement par défaut si le champ n'a pas actuellement le focus. Cela fonctionne pour ces cas:

• cliquer lorsque le champ n'est pas focalisé
• en cliquant lorsque le champ a le focus
• tabulation dans le champ

J'ai testé cela dans Chrome 31, FF 26 et IE 11.

Trouvé une solution géniale en lisant ce fil

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

Je viens de fin 2016 et ce code ne fonctionne que dans les versions récentes de jquery (jquery-2.1.3.js dans ce cas).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

Si j'utilise FF 16.0.2 et jquery 1.8.3, tout le code de la réponse n'a pas fonctionné.
J'utilise du code comme celui-ci et je travaille.

$("input[type=text]").focus().select();

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

Utilisez clearTimeout pour plus de sécurité si vous basculez rapidement entre deux entrées. ClearTimeout nettoie l'ancien timeout ...

Fonctionne très bien avec le JavaScript natif select().

$("input[type=text]").focus(function(event) {
   event.currentTarget.select();
});

ou en général:

$("input[type=text]")[0].select()

Ou vous pouvez simplement utiliser <input onclick="select()">Works perfect.

Vous pouvez utiliser un code simple:

$('#idname').select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

J'utilise toujours requestAnimationFrame()pour sauter par-dessus les mécanismes internes post-événement et cela fonctionne parfaitement dans Firefox. N'ont pas été testés dans Chrome.

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});