J'utilise ce code pour essayer de sélectionner tout le texte du champ lorsqu'un utilisateur se concentre sur le champ. Qu'est-ce qui se passe est, il sélectionne tout pendant une seconde, puis son désélection et le curseur de saisie est laissé où j'ai cliqué ...
$("input[type=text]").focus(function() {
$(this).select();
});
Je veux que tout reste sélectionné.
Essayez d’utiliser click
au lieu de focus
. Cela semble fonctionner à la fois pour la souris et les événements clés (au moins sur Chrome/Mac):
jQuery <version 1.7:
$("input[type='text']").click(function () {
$(this).select();
});
jQuery version 1.7+:
$("input[type='text']").on("click", function () {
$(this).select();
});
Je pense que ce qui se passe est la suivante:
focus()
UI tasks related to pre-focus
callbacks
select()
UI tasks related to focus (which unselect again)
Une solution de contournement peut appeler la sélection () de manière asynchrone, de sorte qu'elle s'exécute complètement après focus ():
$("input[type=text]").focus(function() {
var save_this = $(this);
window.setTimeout (function(){
save_this.select();
},100);
});
Je pense que c'est une meilleure solution. Contrairement à la simple sélection d'un événement onclick, cela n'empêche pas la sélection/édition de texte avec la souris. Il fonctionne avec les principaux moteurs de rendu, y compris IE8.
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
Il y a quelques bonnes réponses ici et @ user2072367 est mon préféré, mais il a un résultat inattendu lorsque vous vous concentrez via un onglet plutôt que via un clic. (résultat inattendu: pour sélectionner le texte normalement après le focus via l'onglet, vous devez cliquer une fois de plus)
Ce violon corrige ce petit bogue et stocke en outre $ (this) dans une variable pour éviter la sélection redondante du DOM. Vérifiez-le! (:
Testé dans IE> 8
$('input').on('focus', function() {
var $this = $(this)
.one('mouseup.mouseupSelect', function() {
$this.select();
return false;
})
.one('mousedown', function() {
// compensate for untriggered 'mouseup' caused by focus via tab
$this.off('mouseup.mouseupSelect');
})
.select();
});
Après un examen attentif, je propose ceci comme une solution bien plus propre dans ce fil de discussion:
$("input").focus(function(){
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
Voici un peu d'explication:
Tout d’abord, examinons l’ordre des événements lorsque vous passez la souris ou la touche dans un champ.
Nous pouvons enregistrer tous les événements pertinents comme ceci:
$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
function(e) { console.log(e.type); });
Note: j'ai changé cette solution pour utiliser
click
plutôt quemouseup
car cela se produit plus tard dans le pipeline d'événements et semble causer quelques problèmes dans Firefox selon le commentaire de @ Jocie.
Certains navigateurs tentent de positionner le curseur lors des événements mouseup
ou click
. Cela a du sens puisque vous voudrez peut-être démarrer le curseur à une position et le faire glisser pour mettre du texte en surbrillance. Il ne peut pas faire de désignation concernant la position du curseur tant que vous n’avez pas réellement soulevé la souris. Ainsi, les fonctions qui manipulent focus
sont vouées à réagir trop tôt, laissant le navigateur ignorer votre positionnement.
Mais le hic, c’est que nous voulons vraiment gérer cet événement. Cela nous permet de savoir la première fois que quelqu'un entre sur le terrain. Après cela, nous ne voulons plus continuer à remplacer le comportement de sélection des utilisateurs.
Au lieu de cela, dans le gestionnaire d'événements focus
, nous pouvons rapidement attacher des écouteurs pour les événements click
(click in) et keyup
(tab in) sur le point de se déclencher.
Note: le raccourci clavier d'un événement de tabulation sera en fait déclenché dans le nouveau champ de saisie, pas le précédent
Nous voulons seulement déclencher l'événement une fois. Nous pourrions utiliser .one("click keyup)
, mais ceci appellerait le gestionnaire d'événements une fois pour chaque type d'événement . Au lieu de cela, dès que mouseup ou keyup est enfoncé, nous appelons notre fonction. La première chose à faire est de supprimer les gestionnaires pour les deux. De cette façon, peu importe que nous utilisions un onglet ou une souris. La fonction doit être exécutée exactement une fois.
Note: la plupart des navigateurs sélectionnent naturellement tout le texte lors d'un événement de tabulation, mais comme animatedgif a souligné , nous souhaitons toujours gérer l'événement
keyup
, sinon l'événementmouseup
restera en attente à chaque fois que nous avons mis l'onglet Nous écoutons les deux pour pouvoir désactiver les écouteurs dès que nous avons traité la sélection.
Maintenant, nous pouvons appeler select()
après que le navigateur a fait sa sélection afin d’être sûr de remplacer le comportement par défaut.
Enfin, pour une protection supplémentaire, nous pouvons ajouter espaces de noms d'événement aux fonctions mouseup
et keyup
afin que la méthode .off()
ne supprime aucun autre écouteur pouvant être en lecture.
Testé dans IE 10+, FF 28+ et Chrome 35+
Sinon, si vous souhaitez étendre jQuery avec une fonction appelée once
qui se déclenchera exactement une fois pour n’importe quel nombre d’événements :
$.fn.once = function (events, callback) {
return this.each(function () {
var myCallback = function (e) {
callback.call(this, e);
$(this).off(events, myCallback);
};
$(this).on(events, myCallback);
});
};
Ensuite, vous pouvez simplifier davantage le code comme ceci:
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});
Cela ferait le travail et éviterait que vous ne puissiez plus sélectionner une partie du texte à la souris.
$("input[type=text]").click(function() {
if(!$(this).hasClass("selected")) {
$(this).select();
$(this).addClass("selected");
}
});
$("input[type=text]").blur(function() {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
});
Cette version fonctionne sur ios et corrige également le drag-to-select standard sur windows chrome
var srcEvent = null;
$("input[type=text],input[type=number]")
.mousedown(function (event) {
srcEvent = event;
})
.mouseup(function (event) {
var delta = Math.abs(event.clientX - srcEvent.clientX)
+ Math.abs(event.clientY - srcEvent.clientY);
var threshold = 2;
if (delta <= threshold) {
try {
// ios likes this but windows-chrome does not on number fields
$(this)[0].selectionStart = 0;
$(this)[0].selectionEnd = 1000;
} catch (e) {
// windows-chrome likes this
$(this).select();
}
}
});
Le problème avec la plupart de ces solutions est qu’elles ne fonctionnent pas correctement lors du changement de la position du curseur dans le champ de saisie.
L'événement onmouseup
modifie la position du curseur dans le champ, qui est déclenché après onfocus
(au moins dans Chrome et FF). Si vous supprimez inconditionnellement la mouseup
, l'utilisateur ne peut pas modifier la position du curseur avec la souris.
function selectOnFocus(input) {
input.each(function (index, elem) {
var jelem = $(elem);
var ignoreNextMouseUp = false;
jelem.mousedown(function () {
if (document.activeElement !== elem) {
ignoreNextMouseUp = true;
}
});
jelem.mouseup(function (ev) {
if (ignoreNextMouseUp) {
ev.preventDefault();
ignoreNextMouseUp = false;
}
});
jelem.focus(function () {
jelem.select();
});
});
}
selectOnFocus($("#myInputElement"));
Le code empêchera conditionnellement le comportement par défaut mouseup
si le champ n'a pas le focus. Cela fonctionne pour ces cas:
J'ai testé cela dans Chrome 31, FF 26 et IE 11.
J'ai trouvé une solution géniale en lisant ce fil de discussion
$(function(){
jQuery.selectText('input:text');
jQuery.selectText('input:password');
});
jQuery.extend( {
selectText: function(s) {
$(s).live('focus',function() {
var self = $(this);
setTimeout(function() {self.select();}, 0);
});
}
});
Je viens de fin 2016 et ce code ne fonctionne que dans les versions récentes de jquery (jquery-2.1.3.js dans ce cas).
if ($(element).is("input")) {
$(element).focus(function () {
$(element).select();
});
}
var timeOutSelect;
$("input[type=text]").focus(function() {
var save_this = $(this);
clearTimeout(timeOutSelect);
timeOutSelect = window.setTimeout (function(){
save_this.select();
}, 100);
});
Utilisez clearTimeout pour plus de sécurité si vous passez rapidement d’une entrée à l’autre ..
Ou vous pouvez simplement utiliser <input onclick="select()">
Works perfect.
en utilisant FF 16.0.2 et jquery 1.8.3, tout le code de la réponse ne fonctionnait pas.
J'utilise un code comme celui-ci et je travaille.
$("input[type=text]").focus().select();
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
Vous pouvez utiliser un code simple:
$('#idname').select();
Fonctionne très bien avec la select()
JavaScript native.
$("input[type=text]").focus(function() {
this.select();
});
ou en général:
$("input[type=text]")[0].select()