Sélection de tout le texte dans la saisie de texte HTML lorsque vous cliquez 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 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"

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

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

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>

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.

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

Essayer:

onclick="this.select()"

Ça marche bien pour moi.

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

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.

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.

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.

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.

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.

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

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.

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

Cette question propose des options lorsque .select () ne fonctionne pas sur les plates-formes mobiles: sélection par programme du texte dans un champ de saisie sur les appareils iOS (Safari mobile)

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

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.

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

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.

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

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