jquery entrée sélectionner tout dans le focus
j'utilise ce code pour essayer de sélectionner tout le texte dans le champ quand un utilisateur se concentre sur le champ. Ce qui se passe, c'est qu'il sélectionne tout pour une seconde, puis il est désélectionné et le curseur dactylographié est laissé là où j'ai cliqué...
$("input[type=text]").focus(function() {
$(this).select();
});
je veux que tout reste sélectionné.
15 réponses
essayez click
au lieu de focus
. Il 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 ceci:
focus()
UI tasks related to pre-focus
callbacks
select()
UI tasks related to focus (which unselect again)
une solution de contournement peut appeler select () de manière asynchrone, de sorte qu'il court 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 dans l'événement onclick, cela n'empêche pas de sélectionner/éditer du 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 's est mon préféré, mais il a un résultat inattendu quand vous vous focalisez via l'onglet plutôt que via le clic. (résultat inattendu: pour sélectionner le texte normalement après focus via tab, vous devez cliquer une fois de plus )
ce violon corrige ce petit bogue et stocke en plus $(ceci) dans une variable pour éviter la sélection redondante de DOM. Check it out! (:
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 beaucoup plus propre dans ce fil:
$("input").focus(function(){
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
Démo dans jsFiddle
Le Problème:
Voici une petite explication:
tout d'abord, jetons un coup d'oeil à l'ordre des événements lorsque vous utilisez la souris ou l'onglet 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
comme il arrive plus tard dans le pipeline de l'événement et semble causer des problèmes dans firefox comme @Jocie le commentaire
certains navigateurs tentent de positionner le curseur lors des événements mouseup
ou click
. Ce cela a du sens puisque vous pourriez vouloir commencer le caret dans une position et traîner pour mettre en évidence un certain texte. Il ne peut pas faire une désignation sur la position de caret jusqu'à ce que vous avez réellement soulevé la souris. Ainsi les fonctions qui manipulent focus
sont destinées à répondre trop tôt, laissant le navigateur pour outrepasser votre positionnement.
mais le hic, c'est que nous voulons vraiment gérer l'événement focus. Il nous permet de connaître la première fois que quelqu'un est entré dans le domaine. Après que point, nous ne voulons pas continuer à Outrepasser le comportement de sélection de l'utilisateur.
La Solution:
au lieu de cela, dans le gestionnaire d'événements focus
, nous pouvons rapidement joindre des écouteurs pour les événements click
(cliquez sur in) et keyup
(tab in) qui sont sur le point de tirer.
Note : la clé de sortie d'un événement de l'onglet s'allume en fait dans le nouveau champ d'Entrée, pas le précédent un
Nous ne voulons déclencher l'événement une fois. Nous pourrions utiliser .one("click keyup)
, mais ce serait appeler le gestionnaire d'événements une fois pour chaque type d'événement . Au lieu de cela, dès que mouseup ou keyup est pressé nous appellerons notre fonction. La première chose à faire, c'est d'enlever les manipulateurs pour les deux. Comme ça, peu importe qu'on soit tabassés ou moissonnés. La fonction devrait exécuter exactement une fois.
Note : la plupart des navigateurs sélectionnent naturellement tout le texte lors d'un événement d'onglet, mais comme animatedgif pointed out , nous voulons toujours gérer l'événement
keyup
, sinon l'événementmouseup
sera toujours traîner autour chaque fois que nous avons tabbed dans. Nous écoutons les deux pour 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 donc nous sommes sûrs d'annuler le comportement par défaut.
enfin, pour une protection supplémentaire, nous pouvons ajouter "event namespaces aux fonctions mouseup
et keyup
pour que la méthode .off()
n'enlève aucun autre auditeur qui pourrait être en jeu.
testé dans IE 10+, FF 28+, & Chrome 35 +
alternativement, si vous voulez étendre jQuery avec une fonction appelé once
qui tirera exactement une fois pour un 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);
});
};
alors vous pouvez simplifier le code plus loin comme ceci:
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});
Démo en violon
cela ferait le travail et éviterait la question que vous ne pouvez plus sélectionner une partie du texte par 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");
}
});
le problème avec la plupart de ces solutions est qu'elles ne fonctionnent pas correctement quand on change la position du curseur dans le champ d'entrée.
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 le mouseup
alors l'utilisateur ne peut pas changer 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 sera conditionnel empêcher le comportement par défaut mouseup
si le champ n'a pas de focus. Il fonctionne pour ces cas:
- clic lorsque le champ n'est pas focalisé
- cliquer quand le champ a la mise au point
- tabulation dans le champ
j'ai testé cela dans Chrome 31, FF 26 et IE 11.
cette version Fonctionne sur ios et corrige également la traînée-à-sélectionner 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();
}
}
});
trouvé une solution impressionnante lecture ce fil
$(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();
});
}
i en utilisant FF 16.0.2 et jquery 1.8.3, tout le code dans la réponse n'a pas fonctionné.
J'utilise un code comme celui-ci et je travaille.
$("input[type=text]").focus().select();
Ou vous pouvez simplement utiliser <input onclick="select()">
Fonctionne parfaitement.
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 entre deux entrées.. clearTimeout nettoie l'ancien temps d'arrêt...
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
vous pouvez utiliser le code simple:
$('#idname').select();