Sélectionner tout le texte dans la saisie de texte HTML lorsque cliqué

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

1. dans Chrome la sélection via .select () ne colle pas - ajouter un léger délai résout 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 sur focus, mais permet de sélectionner un point de curseur spécifique après 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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

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 fonctionnera pour chaque entrée 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 ancien, mais la meilleure option est maintenant d'utiliser le nouvel attribut placeholder HTML si possible:

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

cela fera apparaître le texte à moins qu'une valeur ne soit entrée, éliminant la nécessité de sélectionner du texte ou des entrées claires.

les réponses énumérées sont partielles selon moi. J'ai relié ci-dessous deux exemples de comment faire ceci en angle et avec JQuery.

cette solution présente les caractéristiques suivantes:

• fonctionne pour tous les navigateurs qui prennent en charge JQuery, Safari, Chrome, IE, Firefox, etc.
• Travaille pour Phonegap/Cordova: Android et IOs.
• ne sélectionne tout qu'une seule fois après que l'entrée se focalise jusqu'au prochain flou et puis se concentrer
• entrées multiples peuvent être utilisés et il ne se déclenche pas.
• la directive angulaire a une grande réutilisation il suffit d'ajouter 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);
    }
  }
});

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

, Essayez:

onclick="this.select()"

ça me va très bien.

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

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

sélectionne tout le texte de l'élément focalisé.

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

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

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

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

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.

C'est une activité normale pour une boîte de texte.

Cliquez 1 - focus

cliquez 2/3 (double clic) - sélectionnez le texte

vous pouvez définir focus sur la zone de texte lorsque la page se charge pour la première fois de réduire le" select " à un simple double-clic événement.

le problème avec le fait de saisir l'événement de clic est que chaque clic subséquent dans le texte le sélectionnera de nouveau, alors que l'utilisateur s'attendait probablement à repositionner le curseur.

ce qui a fonctionné pour moi était de déclarer une variable, selectSearchTextOnClick, et de la mettre à true par défaut. Le gestionnaire de clic vérifie que la variable est toujours true: si elle l'est, il la met à false et exécute select(). J'ai alors un gestionnaire d'événements flou qui le ramène à la réalité.

les résultats semblent être le comportement auquel je m'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 les feux de l'événement focus, l'événement click peut tirer, désélectionner immédiatement le texte).

Cette question est pour quand .select () ne fonctionne pas sur les plateformes mobiles: sélection programmatique de texte dans un champ d'entrée sur les appareils iOS (mobile Safari)

utilisez "placeholder" au lieu de" value " dans votre champ d'entrée.

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

et code javascript sans bind

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

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 de montrer " veuillez entrer L'identifiant de l'utilisateur " comme un paramètre ou un indice dans l'entrée. Ainsi,vous pouvez utiliser ce qui suit comme une solution plus efficace:

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

Note: lorsque vous considérez onclick="this.select()" , au premier clic, tous les caractères seront sélectionnés, après que peut-être vous vouliez modifier quelque chose en entrée et cliquez parmi les caractères puis il va sélectionner tous les caractères à nouveau. Pour corriger ce problème, vous devez utiliser onfocus au lieu de onclick .

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 l'utiliser comme ceci:

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

l'échantillon est avec requerjs - donc la première et la dernière ligne peuvent être sautées si vous utilisez autre chose.

si quelqu'un veut faire cela sur la page load w/ 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 après . Merci à CSS-Tricks.com

si vous êtes juste en train d'essayer d'avoir le texte du paramètre qui est remplacé quand un utilisateur sélectionne l'élément, alors il est évidemment la meilleure pratique d'utiliser l'attribut placeholder de nos jours. Cependant, si vous voulez sélectionner toute la valeur courante quand un champ gagne la mise au point, alors une combinaison de réponses @Cory House et @Toastrackenigma semble très canonique. Utilisez les événements focus et focusout , avec des gestionnaires qui positionnent/libèrent l'élément de mise au point actuel, et sélectionnez Tout lorsqu'il est mis au point. Un l'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); });
};

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

le placeholder 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 en utilisant ctrl + A. Placeholder fait en sorte que ce n'est pas une valeur mais comme le nom suggère un titulaire de place. C'est ce qui est utilisé dans plusieurs formulaires en ligne qui dit "Nom D'Utilisateur ici" ou "Email" et quand vous cliquez dessus le "Email" disparaît et vous pouvez commencer à taper tout de suite.

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

le truc ici est d'utiliser onMouseDown parce que l'élément a déjà reçu la mise au point au moment où l'événement" click "se déclenche (et donc le contrôle activeElement échouera).

le contrôle activeElement est nécessaire pour permettre à l'utilisateur de positionner son curseur où il le souhaite sans devoir constamment sélectionner l'ensemble de l'entrée.

le timeout est nécessaire parce que sinon le texte sera sélectionné puis instantanément désélectionné, comme je suppose que le navigateur fait les mots-clés de vérification de positionnement du curseur.

et enfin, le el = ev.currentTarget est nécessaire dans React parce que React réutilise les objets de l'événement et vous perdrez l'événement synthétique au moment où le setTimeout déclenche.