Sélectionnez tout le contenu de la zone de texte lorsqu'elle reçoit le focus (Vanilla JS ou jQuery)


311

Qu'est-ce qu'une solution Vanilla JS ou jQuery qui sélectionne tout le contenu d'une zone de texte lorsque la zone de texte reçoit le focus?



3
@gdoron pour une raison quelconque, le lien redirige vers cette question elle-même.
Destrictor


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. Jetez un oeil à ma réponse ici: stackoverflow.com/a/20826207/641452
Colin Breame

Réponses:


370
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

23
Juste pour info supplémentaire: "input [type = text]" peut maintenant être "input: text" regards
Ricardo Vega

8
Cela ne semble pas fonctionner pour moi sur Chrome et le site Web jQuery dit que cela dépend du navigateur. Quelqu'un d'autre peut-il vérifier?
Kenny Wyland

71
Il semble que les navigateurs WebKit interfèrent avec cela en raison de l'événement mouseup. J'ai ajouté ceci et cela a fonctionné: $ ('input: text'). Mouseup (function (e) {return false;});
Kenny Wyland

5
Kenny a raison, mais malheureusement, "mouseup" affecte également les commandes du spinner Chrome. Déclencher le «clic» plutôt que le «focus» semble résoudre cela
Richard Kennard

24
J'utilise comme ceci: $ ("input: text"). Select (). Focus ();
Phuong

227

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />


43
+ onmouseup = "return false" pour arrêter la désélection au clic
Anthony Johnston

2
+1 pour une sorte de stopEvent pour mouseup, ou cela ne fonctionne pas de manière fiable. L'inconvénient de faire cela est qu'une fois que le curseur est dans le champ, cliquer quelque part dans le texte sélectionné pour y positionner le curseur ne fonctionne pas; les clics sont effectivement désactivés. Pourtant, pour les situations où la sélection de l'ensemble du texte sur le focus est souhaitable, c'est probablement le moindre de deux maux.
inscription

J'ai pu contourner quelque peu le problème soulevé par l'énigmentation en définissant une variable globale doMouseUp sur false, lors de l'événement onMouseDown, si cela! = Document.activeElement. Ensuite, pendant onMouseUp, réinitialisez doMouseUp à true et renvoyez la valeur doMouseUp avant de la réinitialiser. Cela devient compliqué et a besoin de code - je posterai une réponse l'expliquant mieux.
Travis

1
Ne pas ajouter onmouseup="return false;"si vous voulez que l'utilisateur puisse choisir librement et modifier le texte après mise au point dans la zone de texte. Avec ce code, le texte sera verrouillé dans une situation «sélectionner tout» et l'utilisateur ne pourra pas le modifier à moins que l'utilisateur ne tape un nouveau texte ou n'utilise les touches fléchées pour se déplacer. Honnêtement, cela ressemble à un comportement très étrange et n'aurait de sens que si la zone de texte est destinée à être définitivement non modifiable (et donc désactivée).
ADTC

1
Techniquement, vous n'avez pas besoin onmouseup="return false;"si vous voulez simplement la sélection se produire lorsque l'utilisateur premiers clics ou des tabulations. Et +1 pour le javascript vanille!
clabe45

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

3
Confirmé. La réponse actuellement votée / acceptée la plus élevée ne semble pas fonctionner pour Chrome.
Aron Boyette

39
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

1
C'est bon. Merci! Le commentaire par énigme à la réponse de Zach donne un inconvénient à empêcher le défaut de l' mouseupévénement: "une fois que le curseur est dans le champ, cliquer quelque part dans le texte sélectionné pour y positionner le curseur ne fonctionne pas; les clics sont effectivement désactivés. des situations où la sélection de l'ensemble du texte sur le focus est souhaitable, c'est probablement le moindre de deux maux. "
JohnK

25

jQuery n'est pas JavaScript, ce qui est plus facile à utiliser dans certains cas.

Regardez cet exemple:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Source: Astuces CSS , MDN


7
Peut-être que ce n'est pas grave si cela ne vous dérange pas de mélanger votre balisage et votre code; la plupart des gens essaient de garder leur script «discret» de nos jours. Oh ... et jQuery est Javascript.
Andrew Barber

2
Merci pour la suggestion d'onclick, fonctionne très bien. Tout le monde n'utilise pas jQuery si heureux de voir une autre option.
Lukus

cela suppose que les utilisateurs n'utilisent que la souris
pcnate

peut utiliser onfocus = "this.focus (); this.select ()" pour le clavier
Muhammad Nadeem

21

Ce n'est pas seulement un problème Chrome / Safari, j'ai rencontré un comportement assez similaire avec Firefox 18.0.1. La partie drôle est que cela ne se produit pas sur MSIE! Le problème ici est le premier événement de souris qui force à désélectionner le contenu d'entrée, donc ignorez simplement la première occurrence.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

L'approche timeOut provoque un comportement étrange, et en bloquant chaque événement de souris, vous ne pouvez pas supprimer la sélection en cliquant à nouveau sur l'élément d'entrée.


1
+1 pour l'utilisation d'un pour éviter une seule souris. J'ai vraiment détesté ne pas pouvoir sélectionner le texte avec la souris après le clic initial.
Pluc

13

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Utilisation de JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Utilisation de JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Utilisation de React JS:

Dans le composant respectif à l'intérieur de la fonction de rendu -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

2
Cela fonctionne pour moi dans React:onFocus={(e) => e.target.select()}
Paito

11

ma solution est d'utiliser un timeout. Semble fonctionner correctement

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

C'est la solution que j'utilise et préfère. J'utilise une valeur de délai d'expiration de 0 car cela entraînera son ajout à la fin de la file d'attente d'événements actuelle, ce qui signifie qu'il s'exécutera après l'événement "mouseup".
DavidM


4

Je sais que le code en ligne est un mauvais style, mais je ne voulais pas le mettre dans un fichier .js. Fonctionne sans jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

3

Les réponses ici m'ont aidé jusqu'à un certain point, mais j'ai eu un problème sur les champs de saisie Nombre HTML5 lorsque j'ai cliqué sur les boutons haut / bas dans Chrome.

Si vous cliquez sur l'un des boutons et que vous passez la souris sur le bouton, le nombre continue de changer comme si vous teniez le bouton de la souris parce que la souris était jetée.

J'ai résolu cela en supprimant le gestionnaire de souris dès qu'il avait été déclenché comme ci-dessous:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

J'espère que cela aidera les gens à l'avenir ...


Nopes. vous donnez une solution à un problème auto-généré. Si vous regardez bien à la réponse, ils lient mouseupaux textes des champs de saisie et ne numbers. Ce problème ne devrait donc pas se produire
Om Shankar

Le problème avec la liaison de souris est qu'elle interfère lors du déplacement du curseur dans le champ. C'est une meilleure solution, mais si vous tabulez dans le champ, le prochain mousedown sera perdu (et l'utilisateur ne pourra pas déplacer le curseur avec la souris). C'est mieux que de perdre tous les mousedowns!
Colin Breame

3

Cela fonctionnera, essayez ceci -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Fonctionne dans Safari / IE 9 et Chrome, je n'ai cependant pas eu la chance de tester dans Firefox.


3

Je sais qu'il y a déjà beaucoup de réponses ici - mais celle-ci manque jusqu'à présent; une solution qui fonctionne également avec le contenu généré par ajax:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

2

J'ai pu légèrement améliorer la réponse de Zach en incorporant quelques appels de fonction. Le problème avec cette réponse est qu'elle désactive complètement onMouseUp, vous empêchant ainsi de cliquer dans la zone de texte une fois qu'elle a le focus.

Voici mon code:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

C'est une légère amélioration par rapport à la réponse de Zach. Il fonctionne parfaitement dans IE, ne fonctionne pas du tout dans Chrome et fonctionne avec succès alternatif dans FireFox (littéralement une fois sur deux). Si quelqu'un a une idée de la façon de le faire fonctionner de manière fiable dans FF ou Chrome, partagez-le.

Quoi qu'il en soit, j'ai pensé partager ce que je pouvais pour rendre cela un peu plus agréable.


Il y a une erreur dans votre code - la deuxième méthode devrait s'appeler "TextBoxMouseUp". Jetez un oeil à ma réponse qui utilise une approche similaire.
Colin Breame

1
Il convient de noter que , onMouseUp=""et onMouseDown=""ne sont pas la norme w3 correcte. Ils devraient être onmouseup=""et onmousedown="". Comme pour les autres attributs html, ils doivent être écrits en minuscules et non en cas de chameau.
DrewT

2

Comme @Travis et @Mari, je voulais sélectionner automatiquement lorsque l'utilisateur cliquait dessus, ce qui signifie empêcher le comportement par défaut d'un mouseupévénement, mais pas empêcher l'utilisateur de cliquer. La solution que j'ai trouvée, qui fonctionne dans IE11, Chrome 45, Opera 32 et Firefox 29 (ce sont les navigateurs que j'ai actuellement installés), est basée sur la séquence d'événements impliqués dans un clic de souris.

Lorsque vous cliquez sur une entrée de texte qui n'a pas de focus, vous obtenez ces événements (entre autres):

  • mousedown: En réponse à votre clic. La gestion par défaut augmente focussi nécessaire et définit le début de la sélection.
  • focus: Dans le cadre de la gestion par défaut de mousedown.
  • mouseup: L'achèvement de votre clic, dont la gestion par défaut mettra fin à la sélection.

Lorsque vous cliquez sur une entrée de texte qui a déjà le focus, l' focusévénement est ignoré. Comme @Travis et @Mari l'ont remarquablement remarqué, la gestion par défaut de mouseupdoit être empêchée uniquement si l' focusévénement se produit. Cependant, comme il n'y focusa pas d'événement " ne s'est pas produit", nous devons en déduire ce que nous pouvons faire dans le mousedowngestionnaire.

La solution de @ Mari nécessite que jQuery soit importé, ce que je veux éviter. La solution de @ Travis le fait en inspectant document.activeElement. Je ne sais pas exactement pourquoi sa solution ne fonctionne pas sur tous les navigateurs, mais il existe un autre moyen de savoir si la saisie de texte a le focus: suivez simplement ses événements focuset ses blurévénements.

Voici le code qui me convient:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

J'espère que cela aide quelqu'un. :-)


+1 Merci, mais comment cela peut-il être réécrit afin de ne pas coder en dur le contrôle 'txtCustomer' dans le script? Existe-t-il un moyen de transmettre un «ce» objet?
Fandango68

Une façon serait de créer une fonction utilitaire pour appliquer le comportement à n'importe quel élément, passé en paramètre. Dans cette fonction, la référence de l'élément serait codée en dur - au paramètre. Vous pouvez alors l'appeler sur n'importe quel nombre d'éléments d'entrée, identifiés par tous les moyens dont vous disposez. :-)
Jonathan Gilbert

Désolé, je suis un noob. Pourriez-vous mettre à jour votre réponse avec un exemple? Merci
Fandango68

1
Enveloppez simplement le code que j'ai écrit dans une déclaration de fonction qui prend un paramètre appelé "txtCustomer". Je recommande de renommer "txtCustomer" en quelque chose d'autre, mais si vous n'êtes pas sûr de le faire, cela fonctionnera techniquement avec la variable nommée "txtCustomer". C'est-à-dire: fonction MakeTextBoxAutoSelect (txtCustomer) { ce que j'ai écrit ci-dessus }
Jonathan Gilbert


1

Qu'est-ce qu'une solution JavaScript ou jQuery qui sélectionne tout le contenu d'une zone de texte lorsque la zone de texte reçoit le focus ?

Il vous suffit d'ajouter l'attribut suivant:

onfocus="this.select()"

Par exemple:

<input type="text" value="sometext" onfocus="this.select()">

(Honnêtement, je n'ai aucune idée de pourquoi vous auriez besoin d'autre chose.)


1

Cela a fonctionné pour moi (publication car ce n'est pas dans les réponses mais dans un commentaire)

 $("#textBox").focus().select();

0
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Edit: selon la demande de @ DavidG, je ne peux pas fournir de détails car je ne sais pas pourquoi cela fonctionne, mais je pense que cela a quelque chose à voir avec l'événement focus se propageant vers le haut ou vers le bas ou quoi que ce soit et l'élément d'entrée recevant la notification il a reçu l'attention. La définition du délai d'attente donne à l'élément un moment pour se rendre compte que c'est fait.


Veuillez expliquer votre réponse plutôt que de simplement coller un code.
DavidG

0

Si vous enchaînez les événements ensemble, je pense que cela élimine le besoin d'utiliser .onecomme suggéré ailleurs dans ce fil.

Exemple:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

0

Remarque: Si vous programmez en ASP.NET, vous pouvez exécuter le script à l'aide de ScriptManager.RegisterStartupScript en C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Ou tapez simplement le script dans la page HTML suggérée dans les autres réponses.


La question n'a ASP.NET nulle part. : |
Mohamed Thaufeeq

C'est vrai, j'ai posté cela juste au cas où le programmeur utilise ASP.NET. Cela peut être utile pour quelqu'un qui cherche une réponse en utilisant le cadre (car cela m'a aidé). Je partage juste et j'espère que quelqu'un le trouvera utile.
Exel Gamboa

Juste au cas où le programmeur utilise ASP.NET, il ajoutera la balise 'asp.net' à la question. : |
Mohamed Thaufeeq

0

Je sème celui-ci quelque part, fonctionne parfaitement!

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

0

Je suis un peu en retard à la fête, mais cela fonctionne parfaitement dans IE11, Chrome, Firefox, sans gâcher la souris (et sans JQuery).

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

oui mais si vous focusen tabulant sur le terrain, vous trouverez plusieurs auditeurs d'événements mouseup attachés ...
Sebastian Scholle

-1

Ma solution est la suivante:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Donc, la souris fonctionnera généralement, mais ne désélectionnera pas après avoir obtenu le focus par entrée

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.