Sélection de tout le texte dans la saisie de texte HTML lorsque vous cliquez dessus


555

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

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

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

Est-il possible de sélectionner tout le texte en un seul clic?

Éditer:

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


6
Une meilleure approche consiste à utiliser un <label>pour l'étiquette et non le value. Vous pouvez utiliser JS et CSS pour lui donner la même apparence, tout en n'étant pas aussi antisémantique. dorward.me.uk/tmp/label-work/example.html a un exemple utilisant jQuery.
Quentin

12
Ou même utilisez un espace réservé si vous travaillez dans un projet HTML5 moderne.
Léo Lam

1
placeholder = "Veuillez saisir l'ID utilisateur"
Marcelo Bonus

Réponses:


910

Vous pouvez utiliser cet extrait javascript:

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

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

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

9
Pour rendre cela plus général, vous pouvez utiliser this.idcomme argument pour le gestionnaire de clics. Mieux encore, vous pouvez éliminer le getElementByIdtout et passer thiscomme argument.
Asad Saeeduddin

12
Sur Safari mobile, cela ne fonctionne pas. Essayez d'appeler this.setSelectionRange (0, 9999) à la place.
Dean Radcliffe

43
@DeanRadcliffe Nice one! J'utiliserais à la this.setSelectionRange(0, this.value.length)place.
2grit


8
Des mises à jour sur le support du navigateur? w3schools.com/jsref/met_text_select.asp affirme qu'il est pris en charge par tous les navigateurs
Ayyash

65

Les solutions précédemment publiées ont deux bizarreries:

  1. Dans Chrome, la sélection via .select () ne colle pas - l'ajout d'un léger délai d'attente résout ce problème.
  2. Il est impossible de placer le curseur à un point souhaité après la mise au point.

Voici une solution complète qui sélectionne tout le texte sur le focus, mais permet de sélectionner un point de curseur spécifique après le focus.

        $(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(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

7
Pour gérer le cas où l'utilisateur clique hors du champ, puis revient, ajoutez.on('blur', 'input', function(){focusedElement = null;})
Tamlyn

1
un timeout de 0travaux pour moi en chrome et firefox. Je ne sais pas d'où vient votre timeout 50.
thejoshwolfe

1
La solution consiste à utiliser onClick à la place de onFocus. Fonctionne parfaitement et n'a pas besoin de codes compliqués.
Ismael

4
@CoryHouse cela n'a pas d'importance, car Focus via l'onglet sélectionne nativement le texte! Aucun javascript requis.
Ismael

1
@CoryHouse même après 4 ans, vos codes fonctionnent comme un charme. Mec, prends un arc. Merci pour ce petit hack sale. Je cherchais 2-3 jours jusqu'à ce que je trouve celui-ci. : +1:
Rutvij Kothari

47

Html (vous devrez mettre l'attribut onclick sur chaque entrée pour laquelle vous souhaitez qu'il fonctionne sur la page)

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

OU UNE MEILLEURE OPTION

jQuery (cela fonctionnera pour chaque saisie de texte sur la page, pas besoin de changer votre 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>

22
Il serait probablement préférable de se lier à l'événement focus plutôt que de cliquer pour ceux qui parcourent les éléments du formulaire.
Andrew Ensley

7
@Andrew Ce n'est pas nécessaire car le texte est toujours sélectionné si vous parcourez les éléments d'entrée. ;-)
nietonfir

les événements de focus sont glitchy, l'événement flou d'autre part est utile pour déclencher la validation et l'enregistrement automatique des formulaires, fonctionne lorsque vous passez à travers aussi!
oLinkWebDevelopment

Cela devrait fonctionner correctement, assurez-vous que vous utilisez une version mise à jour de jQuery ou utilisez $ (document) .live () sur les anciennes versions.
oLinkWebDevelopment

2
À moins que l'utilisateur ne dispose déjà de jQuery, une meilleure option n'implique pas l'ajout d'une dépendance à une bibliothèque tierce.
Ross

37

Je sais que c'est vieux, mais la meilleure option est maintenant d'utiliser le nouvel placeholderattribut HTML si possible:

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

Cela entraînera l'affichage du texte à moins qu'une valeur ne soit entrée, éliminant ainsi la nécessité de sélectionner du texte ou d'effacer les entrées.


2
Veuillez noter que l'espace réservé n'est autorisé qu'avec le doctype html.
dogawaf

12

Les réponses listées sont partielles selon moi. J'ai lié ci-dessous deux exemples de la façon de le faire dans Angular et avec JQuery.

Cette solution présente les fonctionnalités suivantes:

  • Fonctionne pour tous les navigateurs prenant en charge JQuery, Safari, Chrome, IE, Firefox, etc.
  • Fonctionne pour Phonegap / Cordova: Android et IOs.
  • Ne sélectionne tout qu'une seule fois après que la mise au point ait été effectuée jusqu'au prochain flou, puis
  • Plusieurs entrées peuvent être utilisées et ne glitch out.
  • La directive angulaire a une grande réutilisation ajoutez simplement la directive select-all-on-click
  • JQuery peut être modifié facilement

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angulaire: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

belle solution angularjs. THX. bien que je n'utilise pas le drapeau hasSelectedAll. Je suppose que c'est une disposition pour un deuxième clic qui pourrait signifier que l'utilisateur veut placer le curseur.
rosée du

11

Essayer:

onclick="this.select()"

Ça marche bien pour moi.


11

Vous pouvez toujours utiliser document.execCommand( pris en charge dans tous les principaux navigateurs )

document.execCommand("selectall",null,false);

Sélectionne tout le texte dans l'élément actuellement focalisé.


Cela semble être une solution élégante. Le code complet ressemblerait à <input type="text" onclick="document.execCommand('selectall',null,false);" />
ceci

Oui, c'est ma façon préférée de faire ce genre de tâche, en particulier. car cela fonctionne aussi pour les contenteditableéléments. Je pense que vous pouvez également le rendre encore plus élégant, c'est-à <input type="text" onfocus="document.execCommand('selectall')">- dire - à peu près sûr que vous pouvez supprimer le nullet falsesi vous ne les utilisez pas.
Toastrackenigma

Ouais. onfocussemble mieux que onclick. et oui, on peut supprimer nullet false. Merci!
pipepiper

Je conviens que c'est la meilleure solution multi-navigateur avec la mise en garde que le délai mentionné dans la solution @Corey House devrait être utilisé pour rendre ce multi-navigateur compatible.
Eric Lease

1
lors de l'utilisation onfocus, la page entière est sélectionnée lorsque l'utilisateur clique sur l'entrée dans Chrome. onclickfonctionne bien.
robotik

8

entrée autofocus, avec événement onfocus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Cela vous permet d'ouvrir un formulaire avec l'élément souhaité sélectionné. Il fonctionne en utilisant l'autofocus pour frapper l'entrée, qui s'envoie ensuite un événement onfocus, qui à son tour sélectionne le texte.


8

Remarque: Lorsque vous considérez onclick="this.select()", Au premier clic, Tous les caractères seront sélectionnés, Après cela, vous souhaitiez peut-être modifier quelque chose en entrée et cliquer à nouveau parmi les caractères, mais il sélectionnera à nouveau tous les caractères. Pour résoudre ce problème, vous devez utiliser à la onfocusplace de onclick.


6

En effet, utilisez onclick="this.select();"mais n'oubliez pas de le combiner avec disabled="disabled"- cela ne fonctionnera pas alors et vous devrez sélectionner manuellement ou multi-cliquer pour sélectionner, toujours. Si vous souhaitez verrouiller la valeur de contenu à sélectionner, combinez-la avec l'attribut readonly.


4

Voici une version réutilisable de la réponse de Shoban:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

De cette façon, vous pouvez réutiliser le script clair pour plusieurs éléments.


4

Vous pouvez remplacer

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

Avec:

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

L'espace réservé est utilisé pour remplacer la valeur comme la façon dont vous vouliez que les gens puissent taper dans la zone de texte sans avoir à cliquer plusieurs fois ou à l'aide de ctrl + a. L'espace réservé le rend donc ce n'est pas une valeur mais comme son nom l'indique un espace réservé. C'est ce qui est utilisé dans plusieurs formulaires en ligne qui dit "Nom d'utilisateur ici" ou "E-mail" et lorsque vous cliquez dessus, "E-mail" disparaît et vous pouvez commencer à taper tout de suite.


3

La solution exacte à ce que vous avez demandé est:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Mais je suppose que vous essayez d'afficher "Veuillez saisir l'ID utilisateur" comme espace réservé ou indice dans l'entrée. Vous pouvez donc utiliser les éléments suivants comme une solution plus efficace:

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

3

Voici un exemple dans React, mais il peut être traduit en jQuery sur vanilla JS si vous préférez:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

L'astuce ici est d'utiliser onMouseDowncar l'élément a déjà reçu le focus au moment où l'événement "clic" se déclenche (et donc la activeElementvérification échouera).

La activeElementvérification est nécessaire pour que l'utilisateur puisse positionner son curseur où il le souhaite sans avoir à sélectionner constamment de nouveau la totalité de l'entrée.

Le délai est nécessaire car sinon le texte sera sélectionné puis instantanément désélectionné, car je suppose que le navigateur vérifie le positionnement du curseur après les mots.

Enfin, le el = ev.currentTargetest nécessaire dans React car React réutilise les objets événement et vous perdrez l'événement synthétique au moment où setTimeout se déclenche.


est React le nouveau jQuery?
vpzomtrrfrt

@vpzomtrrfrt Bien sûr, c'est: DJ / K. J'avais écrit cela dans React et je n'étais pas sur le point de le désaccepter juste pour certains points SO. À prendre ou à laisser :-)
mpen

Comment est-ce un exemple dans React?! C'est plus un exemple en javascript natif.
Cesar

2

Le problème lié à la capture de l'événement de clic est que chaque clic suivant dans le texte le sélectionne à nouveau, alors que l'utilisateur s'attendait probablement à repositionner le curseur.

Ce qui a fonctionné pour moi, c'était de déclarer une variable, de sélectionnerSearchTextOnClick et de la définir sur true par défaut. Le gestionnaire de clics vérifie que la variable est toujours vraie: si c'est le cas, il la définit sur false et effectue la sélection (). J'ai ensuite un gestionnaire d'événements flou qui le remet à true.

Jusqu'à présent, les résultats semblent être le comportement que j'attendais.

(Edit: j'ai négligé de dire que j'avais essayé d'attraper l'événement focus comme quelqu'un l'a suggéré, mais cela ne fonctionne pas: après le déclenchement de l'événement focus, l'événement click peut se déclencher, désélectionnant immédiatement le texte).



2

Html comme celui-ci <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

et code javascript sans liaison

function textSelector(ele){
    $(ele).select();
}

4
"javascript:" n'est utilisé qu'en href, et doit être évité.
user1133275

1

Eh bien, c'est une activité normale pour un TextBox.

Cliquez 1 - Définir le focus

Cliquez 2/3 (double clic) - Sélectionnez le texte

Vous pouvez définir le focus sur la TextBox lors du premier chargement de la page pour réduire la «sélection» à un seul événement de double-clic.


1
2 clics sont également pour la sélection de mots et 3 pour la sélection de lignes.
Arthur

1

Utilisez "espace réservé" au lieu de "valeur" dans votre champ de saisie.


0

Si vous utilisez AngularJS, vous pouvez utiliser une directive personnalisée pour un accès facile:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Maintenant, on peut simplement l'utiliser comme ceci:

<input type="text" select-on-click ... />

L'exemple est avec requirejs - donc la première et la dernière ligne peuvent être ignorées si vous utilisez autre chose.


0

Si quelqu'un veut le faire sur le chargement de la page avec jQuery (doux pour les champs de recherche), voici ma solution

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Basé sur ce post. Merci à CSS-Tricks.com


0

Si vous essayez simplement de remplacer le texte de l'espace réservé lorsqu'un utilisateur sélectionne l'élément, il est évidemment préférable d'utiliser de placeholdernos jours l'attribut. Cependant, si vous souhaitez sélectionner toute la valeur actuelle lorsqu'un champ gagne le focus, une combinaison de réponses @Cory House et @Toastrackenigma semble être la plus canonique. Utilisation focuset focusoutévénements, avec des gestionnaires qui définissent / libèrent l'élément de focus actuel, et tout sélectionner lorsqu'ils sont focalisés. Un exemple angular2 / typescript est le suivant (mais serait trivial à convertir en vanilla js):

Modèle:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Composant:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};
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.