Qu'est-ce qu'une solution Vanilla JS ou jQuery qui sélectionne tout le contenu d'une zone de texte lorsque la zone de texte reçoit le focus?
Qu'est-ce qu'une solution Vanilla JS ou jQuery qui sélectionne tout le contenu d'une zone de texte lorsque la zone de texte reçoit le focus?
Réponses:
$(document).ready(function() {
$("input:text").focus(function() { $(this).select(); } );
});
<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />
onmouseup="return false;"
si vous voulez que l'utilisateur puisse choisir librement et modifier le texte après mise au point dans la zone de texte. Avec ce code, le texte sera verrouillé dans une situation «sélectionner tout» et l'utilisateur ne pourra pas le modifier à moins que l'utilisateur ne tape un nouveau texte ou n'utilise les touches fléchées pour se déplacer. Honnêtement, cela ressemble à un comportement très étrange et n'aurait de sens que si la zone de texte est destinée à être définitivement non modifiable (et donc désactivée).
onmouseup="return false;"
si vous voulez simplement la sélection se produire lorsque l'utilisateur premiers clics ou des tabulations. Et +1 pour le javascript vanille!
$(document).ready(function() {
$("input[type=text]").focus().select();
});
$(document).ready(function() {
$("input:text")
.focus(function () { $(this).select(); } )
.mouseup(function (e) {e.preventDefault(); });
});
mouseup
événement: "une fois que le curseur est dans le champ, cliquer quelque part dans le texte sélectionné pour y positionner le curseur ne fonctionne pas; les clics sont effectivement désactivés. des situations où la sélection de l'ensemble du texte sur le focus est souhaitable, c'est probablement le moindre de deux maux. "
jQuery n'est pas JavaScript, ce qui est plus facile à utiliser dans certains cas.
Regardez cet exemple:
<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>
Source: Astuces CSS , MDN
Ce n'est pas seulement un problème Chrome / Safari, j'ai rencontré un comportement assez similaire avec Firefox 18.0.1. La partie drôle est que cela ne se produit pas sur MSIE! Le problème ici est le premier événement de souris qui force à désélectionner le contenu d'entrée, donc ignorez simplement la première occurrence.
$(':text').focus(function(){
$(this).one('mouseup', function(event){
event.preventDefault();
}).select();
});
L'approche timeOut provoque un comportement étrange, et en bloquant chaque événement de souris, vous ne pouvez pas supprimer la sélection en cliquant à nouveau sur l'élément d'entrée.
HTML:
Enter Your Text : <input type="text" id="text-filed" value="test">
Utilisation de JS:
var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });
Utilisation de JQuery:
$("#text-filed").focus(function() { $(this).select(); } );
Utilisation de React JS:
Dans le composant respectif à l'intérieur de la fonction de rendu -
<input
type="text"
value="test"
onFocus={e => e.target.select()}
/>
onFocus={(e) => e.target.select()}
ma solution est d'utiliser un timeout. Semble fonctionner correctement
$('input[type=text]').focus(function() {
var _this = this;
setTimeout(function() {
_this.select();
}, 10);
});
Cela fonctionnera également sur iOS:
<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
Je sais que le code en ligne est un mauvais style, mais je ne voulais pas le mettre dans un fichier .js. Fonctionne sans jQuery!
<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
Les réponses ici m'ont aidé jusqu'à un certain point, mais j'ai eu un problème sur les champs de saisie Nombre HTML5 lorsque j'ai cliqué sur les boutons haut / bas dans Chrome.
Si vous cliquez sur l'un des boutons et que vous passez la souris sur le bouton, le nombre continue de changer comme si vous teniez le bouton de la souris parce que la souris était jetée.
J'ai résolu cela en supprimant le gestionnaire de souris dès qu'il avait été déclenché comme ci-dessous:
$("input:number").focus(function () {
var $elem = $(this);
$elem.select().mouseup(function (e) {
e.preventDefault();
$elem.unbind(e.type);
});
});
J'espère que cela aidera les gens à l'avenir ...
mouseup
aux textes des champs de saisie et ne number
s. Ce problème ne devrait donc pas se produire
Cela fonctionnera, essayez ceci -
<input id="textField1" onfocus="this.select()" onmouseup="return false" />
Fonctionne dans Safari / IE 9 et Chrome, je n'ai cependant pas eu la chance de tester dans Firefox.
J'ai pu légèrement améliorer la réponse de Zach en incorporant quelques appels de fonction. Le problème avec cette réponse est qu'elle désactive complètement onMouseUp, vous empêchant ainsi de cliquer dans la zone de texte une fois qu'elle a le focus.
Voici mon code:
<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />
<script type="text/javascript">
var doMouseUp = true;
function TextBoxMouseDown() {
doMouseUp = this == document.activeElement;
return doMouseUp;
}
function TextBoxMouseUp() {
if (doMouseUp)
{ return true; }
else {
doMouseUp = true;
return false;
}
}
</script>
C'est une légère amélioration par rapport à la réponse de Zach. Il fonctionne parfaitement dans IE, ne fonctionne pas du tout dans Chrome et fonctionne avec succès alternatif dans FireFox (littéralement une fois sur deux). Si quelqu'un a une idée de la façon de le faire fonctionner de manière fiable dans FF ou Chrome, partagez-le.
Quoi qu'il en soit, j'ai pensé partager ce que je pouvais pour rendre cela un peu plus agréable.
onMouseUp=""
et onMouseDown=""
ne sont pas la norme w3 correcte. Ils devraient être onmouseup=""
et onmousedown=""
. Comme pour les autres attributs html, ils doivent être écrits en minuscules et non en cas de chameau.
Comme @Travis et @Mari, je voulais sélectionner automatiquement lorsque l'utilisateur cliquait dessus, ce qui signifie empêcher le comportement par défaut d'un mouseup
événement, mais pas empêcher l'utilisateur de cliquer. La solution que j'ai trouvée, qui fonctionne dans IE11, Chrome 45, Opera 32 et Firefox 29 (ce sont les navigateurs que j'ai actuellement installés), est basée sur la séquence d'événements impliqués dans un clic de souris.
Lorsque vous cliquez sur une entrée de texte qui n'a pas de focus, vous obtenez ces événements (entre autres):
mousedown
: En réponse à votre clic. La gestion par défaut augmente focus
si nécessaire et définit le début de la sélection.focus
: Dans le cadre de la gestion par défaut de mousedown
.mouseup
: L'achèvement de votre clic, dont la gestion par défaut mettra fin à la sélection.Lorsque vous cliquez sur une entrée de texte qui a déjà le focus, l' focus
événement est ignoré. Comme @Travis et @Mari l'ont remarquablement remarqué, la gestion par défaut de mouseup
doit être empêchée uniquement si l' focus
événement se produit. Cependant, comme il n'y focus
a pas d'événement " ne s'est pas produit", nous devons en déduire ce que nous pouvons faire dans le mousedown
gestionnaire.
La solution de @ Mari nécessite que jQuery soit importé, ce que je veux éviter. La solution de @ Travis le fait en inspectant document.activeElement
. Je ne sais pas exactement pourquoi sa solution ne fonctionne pas sur tous les navigateurs, mais il existe un autre moyen de savoir si la saisie de texte a le focus: suivez simplement ses événements focus
et ses blur
événements.
Voici le code qui me convient:
var blockMouseUp = false;
var customerInputFocused = false;
txtCustomer.onfocus =
function ()
{
try
{
txtCustomer.selectionStart = 0;
txtCustomer.selectionEnd = txtCustomer.value.length;
}
catch (error)
{
txtCustomer.select();
}
customerInputFocused = true;
};
txtCustomer.onblur =
function ()
{
customerInputFocused = false;
};
txtCustomer.onmousedown =
function ()
{
blockMouseUp = !customerInputFocused;
};
txtCustomer.onmouseup =
function ()
{
if (blockMouseUp)
return false;
};
J'espère que cela aide quelqu'un. :-)
Qu'est-ce qu'une solution JavaScript ou jQuery qui sélectionne tout le contenu d'une zone de texte lorsque la zone de texte reçoit le focus ?
Il vous suffit d'ajouter l'attribut suivant:
onfocus="this.select()"
Par exemple:
<input type="text" value="sometext" onfocus="this.select()">
(Honnêtement, je n'ai aucune idée de pourquoi vous auriez besoin d'autre chose.)
Cela a fonctionné pour moi (publication car ce n'est pas dans les réponses mais dans un commentaire)
$("#textBox").focus().select();
$('input').focus(function () {
var self = $(this);
setTimeout(function () {
self.select();
}, 1);
});
Edit: selon la demande de @ DavidG, je ne peux pas fournir de détails car je ne sais pas pourquoi cela fonctionne, mais je pense que cela a quelque chose à voir avec l'événement focus se propageant vers le haut ou vers le bas ou quoi que ce soit et l'élément d'entrée recevant la notification il a reçu l'attention. La définition du délai d'attente donne à l'élément un moment pour se rendre compte que c'est fait.
Remarque: Si vous programmez en ASP.NET, vous pouvez exécuter le script à l'aide de ScriptManager.RegisterStartupScript en C #:
ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );
Ou tapez simplement le script dans la page HTML suggérée dans les autres réponses.
Je suis un peu en retard à la fête, mais cela fonctionne parfaitement dans IE11, Chrome, Firefox, sans gâcher la souris (et sans JQuery).
inputElement.addEventListener("focus", function (e) {
var target = e.currentTarget;
if (target) {
target.select();
target.addEventListener("mouseup", function _tempoMouseUp(event) {
event.preventDefault();
target.removeEventListener("mouseup", _tempoMouseUp);
});
}
});
focus
en tabulant sur le terrain, vous trouverez plusieurs auditeurs d'événements mouseup attachés ...
Ma solution est la suivante:
var mouseUp;
$(document).ready(function() {
$(inputSelector).focus(function() {
this.select();
})
.mousedown(function () {
if ($(this).is(":focus")) {
mouseUp = true;
}
else {
mouseUp = false;
}
})
.mouseup(function () {
return mouseUp;
});
});
Donc, la souris fonctionnera généralement, mais ne désélectionnera pas après avoir obtenu le focus par entrée