jquery entrée sélectionner tout dans le focus

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

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

je veux que tout reste sélectionné.

290
demandé sur Smita Ahinave 2010-06-30 18:34:57

15 réponses

essayez click au 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

426
répondu karim79 2013-08-03 19:31:48

je pense que ce qui se passe est ceci:

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

une solution de contournement peut appeler select () de manière asynchrone, de sorte qu'il court complètement après focus ():

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});
64
répondu Piskvor 2012-11-23 16:38:56

je pense que c'est une meilleure solution. Contrairement à la simple sélection dans l'événement onclick, cela n'empêche pas de sélectionner/éditer du texte avec la souris. Il fonctionne avec les principaux moteurs de rendu, y compris IE8.

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

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

53
répondu user2072367 2013-08-30 13:25:34

il y a quelques bonnes réponses ici et @user2072367 's est mon préféré, mais il a un résultat inattendu quand vous vous focalisez via l'onglet plutôt que via le clic. (résultat inattendu: pour sélectionner le texte normalement après focus via tab, vous devez cliquer une fois de plus )

ce violon corrige ce petit bogue et stocke en plus $(ceci) dans une variable pour éviter la sélection redondante de DOM. Check it out! (:

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();
});
36
répondu animatedgif 2014-02-28 17:38:13

après un examen attentif, je propose ceci 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 une petite explication:

tout d'abord, jetons un coup d'oeil à l'ordre des événements lorsque vous utilisez la souris ou l'onglet dans un champ.

Nous pouvons enregistrer tous les événements pertinents comme ceci:

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

focus events

Note : j'ai changé cette solution pour utiliser click plutôt que mouseup comme il arrive plus tard dans le pipeline de l'événement et semble causer des problèmes dans firefox comme @Jocie le commentaire

certains navigateurs tentent de positionner le curseur lors des événements mouseup ou click . Ce cela a du sens puisque vous pourriez vouloir commencer le caret dans une position et traîner pour mettre en évidence un certain texte. Il ne peut pas faire une désignation sur la position de caret jusqu'à ce que vous avez réellement soulevé la souris. Ainsi les fonctions qui manipulent focus sont destinées à répondre trop tôt, laissant le navigateur pour outrepasser votre positionnement.

mais le hic, c'est que nous voulons vraiment gérer l'événement focus. Il nous permet de connaître la première fois que quelqu'un est entré dans le domaine. Après que point, nous ne voulons pas continuer à Outrepasser le comportement de sélection de l'utilisateur.

La Solution:

au lieu de cela, dans le gestionnaire d'événements focus , nous pouvons rapidement joindre des écouteurs pour les événements click (cliquez sur in) et keyup (tab in) qui sont sur le point de tirer.

Note : la clé de sortie d'un événement de l'onglet s'allume en fait dans le nouveau champ d'Entrée, pas le précédent un

Nous ne voulons déclencher l'événement une fois. Nous pourrions utiliser .one("click keyup) , mais ce serait appeler le gestionnaire d'événements une fois pour chaque type d'événement . Au lieu de cela, dès que mouseup ou keyup est pressé nous appellerons notre fonction. La première chose à faire, c'est d'enlever les manipulateurs pour les deux. Comme ça, peu importe qu'on soit tabassés ou moissonnés. La fonction devrait exécuter exactement une fois.

Note : la plupart des navigateurs sélectionnent naturellement tout le texte lors d'un événement d'onglet, mais comme animatedgif pointed out , nous voulons toujours gérer l'événement keyup , sinon l'événement mouseup sera toujours traîner autour chaque fois que nous avons tabbed dans. Nous écoutons les deux pour désactiver les écouteurs 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 d'annuler le comportement par défaut.

enfin, pour une protection supplémentaire, nous pouvons ajouter "event namespaces aux fonctions mouseup et keyup pour que la méthode .off() n'enlève aucun autre auditeur qui pourrait être en jeu.


testé dans IE 10+, FF 28+, & Chrome 35 +


alternativement, si vous voulez étendre jQuery avec une fonction appelé once qui tirera exactement une fois pour un 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);
    });
};

alors vous pouvez simplifier le code plus loin comme ceci:

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

Démo en violon

20
répondu KyleMit 2017-05-23 11:47:26

cela ferait le travail et éviterait la question que vous ne pouvez plus sélectionner une partie du texte par 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");
    }
});
11
répondu Nianpeng 2013-11-03 05:41:32

le problème avec la plupart de ces solutions est qu'elles ne fonctionnent pas correctement quand on change la position du curseur dans le champ d'entrée.

l'événement onmouseup 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 mouseup alors l'utilisateur ne peut pas changer 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 sera conditionnel empêcher le comportement par défaut mouseup si le champ n'a pas de focus. Il fonctionne pour ces cas:

  • clic lorsque le champ n'est pas focalisé
  • cliquer quand le champ a la mise au point
  • tabulation dans le champ

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

5
répondu Colin Breame 2013-12-29 14:34:12

cette version Fonctionne sur ios et corrige également la traînée-à-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 /

5
répondu anihilnine 2014-04-02 05:08:57

trouvé une solution impressionnante lecture 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);
        });
    }
});
4
répondu RafaelTSCS 2013-03-21 14:31:19

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();
    });
}
2
répondu Aaron 2016-11-10 21:25:03

i en utilisant FF 16.0.2 et jquery 1.8.3, tout le code dans la réponse n'a pas fonctionné.

J'utilise un code comme celui-ci et je travaille.

$("input[type=text]").focus().select();
1
répondu GusDeCooL 2012-11-26 12:45:01

Ou vous pouvez simplement utiliser <input onclick="select()"> Fonctionne parfaitement.

1
répondu tectiv3 2015-09-02 12:14:31
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 passez rapidement entre deux entrées.. clearTimeout nettoie l'ancien temps d'arrêt...

1
répondu asimov 2016-07-11 09:36:12
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
0
répondu trikon 2016-04-02 04:24:48

vous pouvez utiliser le code simple:

$('#idname').select();
0
répondu Rubén Ruíz 2017-05-04 22:55:26