web-dev-qa-db-fra.com

Sélectionner tout le contenu de la zone de texte avec la mise au point (Vanilla JS ou jQuery)

Qu'est-ce qu'une solution Vanilla JS ou jQuery qui sélectionnera tout le contenu d'une zone de texte lorsque celle-ci sera activée?

javascriptjqueryuser-interface
282
Jon Erickson
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
343
John Sheehan
<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />
206
Zach
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
40
Yogesh Agrawal
$(document).ready(function() {
  $("input[type=text]").focus().select();
});
40
Tomas Kirda

Ce n'est pas juste un problème Chrome/Safari, j'ai eu un comportement assez similaire avec Firefox 18.0.1. La partie amusante est que cela ne se produit pas sur MSIE! Le problème ici est le premier événement mouseup qui oblige à désélectionner le contenu en entrée, alors 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 bloquant chaque événement de souris, vous ne pouvez pas supprimer la sélection en cliquant à nouveau sur l'élément d'entrée.

19
Cizar

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>

De CSS Trics .

19
aaa

ma solution est d'utiliser un délai d'attente. Semble fonctionner ok

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

Cela fonctionnera également sur iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

5
Kai

Je sais que le code en ligne est de 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
user3296743

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

Les réponses ici m'ont aidé jusqu'à un certain point, mais j'avais un problème avec les champs de saisie du numéro HTML5 lorsque je cliquais sur les boutons haut/bas de Chrome.

Si vous cliquez sur l'un des boutons et laissez la souris sur le bouton, le numéro changera comme si vous teniez le bouton de la souris enfoncé, car la souris était jetée.

J'ai résolu ce problème en supprimant le gestionnaire de souris dès qu'il était 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 dans le futur ...

3
H2Os

Comme @Travis et @Mari, je souhaitais sélectionner automatiquement lorsque l'utilisateur cliquait dessus, ce qui signifie empêcher le comportement par défaut d'un événement mouseup, mais n'empêche pas l'utilisateur de cliquer. La solution que j'ai proposée, qui fonctionne sous 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 le focus, vous obtenez ces événements (entre autres):

  • mousedown: En réponse à votre clic. Le traitement par défaut soulève focus si nécessaire et définit le début de la sélection.
  • focus: Dans le cadre du traitement par défaut de mousedown.
  • mouseup: La fin de votre clic, dont le traitement par défaut définira la fin de la sélection.

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

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 pourquoi sa solution ne fonctionne pas avec tous les navigateurs, mais il existe un autre moyen de savoir si la saisie de texte est active: il vous suffit de suivre ses événements focus et blur.

Voici le code qui fonctionne pour moi:

    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 aidera quelqu'un. :-)

2
Jonathan Gilbert

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
Aniruddha Shevle

Cela fonctionnera, essayez ceci - 

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

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

2
Adithya Kumaranchath

J'ai pu améliorer légèrement la réponse de Zach en intégrant quelques appels de fonction. Le problème avec cette réponse est que cela désactive complètement OnMouseUp, ce qui vous empêche de cliquer dans la zone de texte une fois que le focus est activé.

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. Cela fonctionne parfaitement dans IE, ne fonctionne pas du tout dans Chrome et fonctionne alternativement avec succès dans FireFox (littéralement toutes les deux fois). Si quelqu'un a une idée sur la façon de le faire fonctionner correctement dans FF ou Chrome, merci de le partager. 

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

2
Travis

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

Vous devez seulement ajouter l'attribut suivant:

onfocus="this.select()"

Par exemple:

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

(Honnêtement, je ne sais pas pourquoi vous auriez besoin d'autre chose.)

1
ADTC

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

 $("#textBox").focus().select();
1
Vijay Vepakomma
onclick="this.focus();this.select()"
1
Rahul
$('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 suis pas sûr de savoir pourquoi cela fonctionne, mais je pense que cela a quelque chose à voir avec l'évènement de focus se propageant vers le haut ou le bas ou quoi que ce soit d'autre et l'élément d'entrée recevant la notification c'est le foyer reçu. Le réglage du délai d'attente donne à l'élément un moment pour se rendre compte que c'est fait.

0
Michael Tranchida

Si vous enchaînez les événements, je pense que cela élimine la nécessité d'utiliser .one comme suggéré ailleurs dans ce fil.

Exemple:

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

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. 

0
Exel Gamboa

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);
        });
    }
});
0
Guillaume B.

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
yaniv