web-dev-qa-db-fra.com

jquery input sélectionner tout sur le focus

J'utilise ce code pour essayer de sélectionner tout le texte du champ lorsqu'un utilisateur se concentre sur le champ. Qu'est-ce qui se passe est, il sélectionne tout pendant une seconde, puis son désélection et le curseur de saisie est laissé où j'ai cliqué ...

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

Je veux que tout reste sélectionné.

jqueryinput
299
Tim

Essayez d’utiliser click au lieu de focus. Cela 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

442
karim79

Je pense que ce qui se passe est la suivante:

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

Une solution de contournement peut appeler la sélection () de manière asynchrone, de sorte qu'elle s'exécute complètement après focus ():

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

Je pense que c'est une meilleure solution. Contrairement à la simple sélection d'un événement onclick, cela n'empêche pas la sélection/édition de 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
user2072367

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

Ce violon corrige ce petit bogue et stocke en outre $ (this) dans une variable pour éviter la sélection redondante du DOM. 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();
});
36
animatedgif

Après un examen attentif, je propose ceci comme une solution bien plus propre dans ce fil de discussion:

$("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 un peu d'explication:

Tout d’abord, examinons l’ordre des événements lorsque vous passez la souris ou la touche 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 car cela se produit plus tard dans le pipeline d'événements et semble causer quelques problèmes dans Firefox selon le commentaire de @ Jocie.

Certains navigateurs tentent de positionner le curseur lors des événements mouseup ou click. Cela a du sens puisque vous voudrez peut-être démarrer le curseur à une position et le faire glisser pour mettre du texte en surbrillance. Il ne peut pas faire de désignation concernant la position du curseur tant que vous n’avez pas réellement soulevé la souris. Ainsi, les fonctions qui manipulent focus sont vouées à réagir trop tôt, laissant le navigateur ignorer votre positionnement.

Mais le hic, c’est que nous voulons vraiment gérer cet événement. Cela nous permet de savoir la première fois que quelqu'un entre sur le terrain. Après cela, nous ne voulons plus continuer à remplacer le comportement de sélection des utilisateurs. 

La solution:

Au lieu de cela, dans le gestionnaire d'événements focus, nous pouvons rapidement attacher des écouteurs pour les événements click (click in) et keyup (tab in) sur le point de se déclencher.

Note: le raccourci clavier d'un événement de tabulation sera en fait déclenché dans le nouveau champ de saisie, pas le précédent

Nous voulons seulement déclencher l'événement une fois. Nous pourrions utiliser .one("click keyup), mais ceci appellerait le gestionnaire d'événements une fois pour chaque type d'événement . Au lieu de cela, dès que mouseup ou keyup est enfoncé, nous appelons notre fonction. La première chose à faire est de supprimer les gestionnaires pour les deux. De cette façon, peu importe que nous utilisions un onglet ou une souris. La fonction doit être exécutée exactement une fois.

Note: la plupart des navigateurs sélectionnent naturellement tout le texte lors d'un événement de tabulation, mais comme animatedgif a souligné , nous souhaitons toujours gérer l'événement keyup, sinon l'événement mouseup restera en attente à chaque fois que nous avons mis l'onglet Nous écoutons les deux pour pouvoir 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 afin d’être sûr de remplacer le comportement par défaut.

Enfin, pour une protection supplémentaire, nous pouvons ajouter espaces de noms d'événement aux fonctions mouseup et keyup afin que la méthode .off() ne supprime aucun autre écouteur pouvant être en lecture.

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

Sinon, si vous souhaitez étendre jQuery avec une fonction appelée once qui se déclenchera exactement une fois pour n’importe quel 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 en violon

20
KyleMit

Cela ferait le travail et éviterait que vous ne puissiez plus sélectionner une partie du texte à 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");
    }
});
13
Nianpeng

Cette version fonctionne sur ios et corrige également le drag-to-select 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/

6
anihilnine

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

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 la mouseup, l'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 comportement par défaut mouseup si le champ n'a pas le focus. Cela fonctionne pour ces cas:

  • cliquer quand le champ n'est pas centré
  • cliquer quand le champ a le focus
  • tabulation sur le terrain

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

5
Colin Breame

J'ai trouvé une solution géniale en lisant ce fil de discussion

$(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
RafaelTSCS

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
Aaron
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 d’une entrée à l’autre ..

2
asimov

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

1
tectiv3

en utilisant FF 16.0.2 et jquery 1.8.3, tout le code de la réponse ne fonctionnait pas.
J'utilise un code comme celui-ci et je travaille.

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

Vous pouvez utiliser un code simple:

$('#idname').select();
0
Rubén Ruíz

Fonctionne très bien avec la select() JavaScript native.

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

ou en général:

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