Sélection de tout le texte dans l'entrée 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 s’affiche, le texte contient le message . Entrez le message d’identification de l’utilisateur . Cependant, j'ai constaté que l'utilisateur devait cliquer 3 fois pour sélectionner tout le texte (dans ce cas, il s'agit de . Entrez l'ID utilisateur ).
Est-il possible de sélectionner l'intégralité du texte en un seul clic?
Edit:
Désolé, j'ai oublié de dire: je dois utiliser l'entrée type="text"
Vous pouvez utiliser cet extrait de code 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:
- 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.
- 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 sélectionné, mais permet de sélectionner un point de curseur 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.
});
});
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 entrée 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>
Je sais que c'est vieux, mais la meilleure option est d'utiliser maintenant le nouvel attribut HTML placeholder HTML si possible:
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
Cela entraînera l'affichage du texte sauf si une valeur est entrée, éliminant ainsi la nécessité de sélectionner du texte ou d'effacer des entrées.
Les réponses énumérées sont partielles selon moi. J'ai lié ci-dessous deux exemples de la procédure à suivre 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.
- Fonctionne pour Phonegap/Cordova: Android et IOs.
- Sélectionne tous tous les éléments une fois après la mise au point jusqu'au flou suivant, puis à la mise au point.
- Plusieurs entrées peuvent être utilisées et cela ne disparaît pas.
- La directive angulaire a une grande réutilisation simplement ajouter une 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 ( supporté par tous les principaux navigateurs )
document.execCommand("selectall",null,false);
Sélectionne tout le texte de l'élément actuellement sélectionné.
En effet, utilisez onclick="this.select();" mais n'oubliez pas de ne pas le combiner avec disabled="disabled" - cela ne fonctionnera pas alors et vous devrez sélectionner manuellement ou en cliquant plusieurs fois pour le sélectionner. Si vous souhaitez verrouiller la valeur du contenu à sélectionner, combinez-le avec l'attribut readonly.
autofocus en 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 l'autofocus pour frapper l'entrée, qui s'envoie ensuite un événement onfocus, qui sélectionne à son tour le texte.
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 saisir l'ID utilisateur" en tant qu'espace réservé ou indice dans l'entrée. Vous pouvez donc utiliser les solutions suivantes comme solution plus efficace:
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
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é sert à remplacer la valeur de la manière dont vous voulez que les gens puissent taper dans la zone de texte sans avoir à cliquer plusieurs fois ou à l'aide de la combinaison de touches Ctrl + a. L'espace réservé fait en sorte que 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 "Email" et lorsque vous cliquez dessus, le "Email" disparaît et vous pouvez commencer à taper tout de suite.
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.
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();
}
Cette question contient des options pour les cas où .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)
Voici un exemple dans React, mais vous pouvez le traduire 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 consiste ici à utiliser onMouseDown car l'élément a focus déjà reç au moment du déclenchement de l'événement "clic" (et donc la vérification activeElement échouera).
La coche activeElement est nécessaire pour que l'utilisateur puisse positionner son curseur où il le souhaite sans re-sélectionner constamment toute l'entrée.
La temporisation est nécessaire car sinon, le texte sera sélectionné puis instantanément désélectionné, car je suppose que le navigateur vérifie ensuite le positionnement du curseur.
Et enfin, le el = ev.currentTarget est nécessaire dans React car React réutilise des objets d'événement et vous perdez le événement synthétique au moment du déclenchement de setTimeout.
Le problème avec la capture de l'événement click est que chaque clic subséquent dans le texte le sélectionnera à nouveau, alors que l'utilisateur s'attendait probablement à repositionner le curseur.
Ce qui a fonctionné pour moi a été de déclarer une variable, selectSearchTextOnClick, 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 met à false et effectue la sélection (). J'ai ensuite un gestionnaire d'événements Blur qui le redéfinit sur true.
Jusqu'à présent, les résultats semblent être le comportement que j'attendais.
(Édition: j'ai omis de dire que j'avais essayé de capturer l'événement de focus comme quelqu'un l'avait suggéré, mais cela ne fonctionne pas: après le déclenchement de l'événement de focus, l'événement de clic peut se déclencher, désélectionnant immédiatement le texte).
Note: Lorsque vous considérez onclick="this.select()", au premier clic, tous les caractères seront sélectionnés, après cela, vous voudrez peut-être éditer quelque chose en entrée et cliquer entre les caractères, puis tous les caractères seront à nouveau sélectionnés . Pour résoudre ce problème, vous devez utiliser onfocus au lieu de onclick.
Utilisez "espace réservé" au lieu de "valeur" dans votre champ de saisie.
C'est une activité normale pour une zone de texte.
Cliquez 1 - Définir le focus
Cliquez sur 2/ (double-cliquez) - Sélectionnez le texte
Vous pouvez définir focus sur la zone de texte lors du premier chargement de la page pour réduire le "select" à un simple événement de double-clic.
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'échantillon est avec requirejs - ainsi, la première et la dernière ligne peuvent être ignorées si vous utilisez autre chose.
Si vous essayez simplement de remplacer le texte fictif lorsqu'un utilisateur sélectionne l'élément, il est évidemment préférable d'utiliser l'attribut placeholder de nos jours. Cependant, si vous souhaitez sélectionner toute la valeur actuelle lorsqu'un champ devient actif, la combinaison des réponses @Cory House et @Toastrackenigma semble être la plus canonique. Utilisez les événements focus et focusout, avec des gestionnaires qui définissent/libèrent l'élément sélectionné et sélectionnent tous les éléments mis en évidence. Un exemple avec angular2/TypeScript est le suivant (mais la conversion en Vanilla js serait simple):
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); });
};
Si quelqu'un veut le faire lors du chargement de la page avec jQuery (bon 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 this post. Merci à CSS-Tricks.com