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

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?

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

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

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

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

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.

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

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

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

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

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>

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

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.

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

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.

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. :-)

onclick="this.focus();this.select()"

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

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

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

$('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.

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

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.

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

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

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

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