entrée jquery sélectionnez tout sur le focus

Essayez d’utiliser le click au lieu du focus . Il semble fonctionner pour la souris et les événements clés (au moins sur Chrome / Mac):

jQuery

 $("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 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 le select () de manière asynchrone, de sorte 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 l’é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/

Il y a quelques réponses correctes ici et @ user2072367 est mon préféré, mais il a un résultat inattendu lorsque vous vous concentrez par onglet plutôt que par clic. (résultat inattendu: pour sélectionner le texte normalement après la mise au point via l’onglet, vous devez cliquer sur une heure supplémentaire)

Ce violon corrige ce petit bogue et stocke en outre $ (this) 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 unsortingggered 'mouseup' caused by focus via tab $this.off('mouseup.mouseupSelect'); }) .select(); }); 

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 un petit peu d’explication:

Tout d’abord, regardons l’ordre des événements lorsque vous passez la souris ou un 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); }); 

Note : J’ai changé cette solution pour utiliser le click plutôt que le mouseup car cela se produit plus tard dans le pipeline des événements et semblait causer des problèmes avec Firefox selon le commentaire de @ Jocie

Certains navigateurs tentent de positionner le curseur pendant les événements de click ou de click . Cela a du sens, car vous voudrez peut-être démarrer le curseur dans une position et faites glisser le curseur pour mettre du texte en surbrillance. Il ne peut pas faire de désignation sur la position du caret tant que vous n’avez pas soulevé la souris. Les fonctions qui gèrent le focus doivent donc réagir trop tôt, laissant le navigateur remplacer votre positionnement.

Mais le problème est que nous voulons vraiment gérer l’événement de 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 plus continuer à ignorer le comportement de sélection des utilisateurs.

La solution:

Au lieu de cela, dans le gestionnaire d’événements focus , nous pouvons rapidement joindre des écouteurs pour les événements click (click in) et keyup (tab in) qui sont sur le sharepoint se déclencher.

Note : Le keyup d’un événement de tabulation se déclenchera 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 cela appellera le gestionnaire d’événement une fois pour chaque type d’événement . Au lieu de cela, dès que vous appuyez sur mouseup ou keyup, nous appellerons notre fonction. La première chose que nous ferons, est de supprimer les gestionnaires pour les deux. De cette façon, peu importe si nous avons tabulé ou inséré. La fonction doit 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 fait remarquer , nous souhaitons toujours gérer l’événement keyup , sinon l’événement mouseup tout moment. peut désactiver les écouteurs dès que nous avons traité la sélection.

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

Enfin, pour une protection supplémentaire, nous pouvons append des espaces de noms d’événement aux fonctions mouseup et keyup afin que la méthode .off() ne supprime pas les autres écouteurs susceptibles d’être .off() .

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

Alternativement, si vous voulez étendre jQuery avec une fonction appelée once cela 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 le code comme ceci:

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

Démo en violon

Cela ferait le travail et éviterait que vous ne puissiez 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"); } }); 

Le problème avec la plupart de ces solutions est qu’elles ne fonctionnent pas correctement lors de la modification 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 un onfocus (au moins dans Chrome et FF). Si vous mouseup 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 de mouseup 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

Je l’ai testé dans Chrome 31, FF 26 et IE 11.

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/

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

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 fonctionne.

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

Ou vous pouvez simplement utiliser Fonctionne parfaitement.

 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 …

Vous pouvez utiliser du code simple:

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