Question Sélection de tout le texte dans la saisie de texte HTML lorsque l'utilisateur clique dessus


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 affiche, le texte contient le Veuillez entrer l'identifiant utilisateur message. Cependant, j'ai trouvé que l'utilisateur doit cliquer 3 fois pour sélectionner tout le texte (dans ce cas, c'est Veuillez entrer l'identifiant utilisateur).

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

Modifier:

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


414
2017-11-01 08:27


origine


Réponses:


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" />

714
2017-11-01 08:32



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 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 spécifique après la mise au point.

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

53
2017-10-21 15:21



Html (vous devrez mettre l'attribut onclick sur chaque entrée pour laquelle 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 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>

37
2017-10-10 05:16



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

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

Cela provoquera l'affichage du texte à moins qu'une valeur ne soit entrée, éliminant le besoin de sélectionner du texte ou de supprimer des entrées.


31
2018-05-17 06:25



Les réponses énuméré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 caractéristiques suivantes:

  • Fonctionne pour tous les navigateurs prenant en charge JQuery, Safari, Chrome, IE, Firefox, etc.
  • Works pour Phonegap / Cordova: Android et IOs.
  • Ne sélectionne que toutes les fois qu'une fois l'entrée est mise au point jusqu'au prochain flou puis se concentre
  • Plusieurs entrées peuvent être utilisées et elles ne s’étendent pas.
  • Directive angulaire a une grande réutilisation simplement ajouter une directive select-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;
      });
    }
  };
}]);

12
2017-09-10 12:13



Essayer:

onclick="this.select()"

Ça marche bien pour moi.


10
2018-01-29 00:17



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


8
2018-01-18 07:29



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


5
2018-06-05 11:22



autofocus d'entrée, 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é. Cela fonctionne en utilisant autofocus pour frapper l'entrée, qui envoie alors elle-même un événement onfocus, qui à son tour sélectionne le texte.


5
2018-02-23 06:26