Sélectionner tout le texte dans le code HTML de saisie de texte lorsque l'utilisateur clique dessus

Question

J'ai le code suivant pour afficher une zone de texte dans une page HTML.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Lorsque la page s'affiche, le texte contient de l' Veuillez entrer l'IDENTIFIANT de l'utilisateur message. Cependant, j'ai trouvé que l'utilisateur doit cliquer 3 fois pour sélectionner tout le texte (dans ce cas, il est Veuillez entrer l'ID utilisateur).

Est-il possible de sélectionner l'intégralité du texte avec un seul clic?

Edit:

Désolé, j'ai oublié de dire: je dois utiliser l'entrée type="text"

Answer 1

Vous pouvez utiliser ce bout de code javascript:

<input onClick="this.select();" value="Sample Text" />

Mais apparemment il ne fonctionne pas sur Safari mobile. Dans ces cas, vous pouvez utiliser:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Answer 2

Précédemment posté des solutions ont deux particularités:

1. Dans google Chrome, la sélection via .sélectionnez() ne colle pas - ajout d'un léger délai de résoudre ce problème.
2. Il est impossible de placer le curseur à un point désiré après l'accent.

Voici une solution complète qui sélectionne tout le texte de la concentration, mais permet de sélectionner un curseur spécifique point d'après l'accent.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == $(this)) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = $(this);
                setTimeout(function () { focusedElement.select(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

Answer 3

Html (vous aurez à mettre l'attribut onclick sur chaque entrée que vous voulez qu'il fonctionne sur la page)

 <input type="text" value="click the input to select" onclick="this.select();"/>

OU UNE MEILLEURE OPTION

jQuery (cela fonctionne pour chaque saisie de texte sur la page, pas besoin de changer votre code html):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

Answer 4

Je sais que c'est vieux, mais la meilleure option est maintenant utiliser le nouveau placeholder attributs HTML si possible:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Cela va entraîner le texte à afficher, sauf si une valeur est entrée, éliminant le besoin pour sélectionner du texte ou effacer des entrées.

Answer 5

Essayez:

onclick="this.select()"

Il fonctionne très bien pour moi.