Recherche d'une meilleure solution de contournement du bogue de Chrome concernant la sélection sur le focus

Question

J'ai le même problème que l'utilisateur dans cette question qui est due à ce bug dans Webkit. Cependant, la solution de contournement fournie ne fonctionnera pas pour mon application. Permettez-moi de reformuler le problème afin que vous n'ayez pas à lire une autre question :

J'essaie de sélectionner tout le texte d'une zone de texte lorsqu'elle reçoit le focus. Le code jQuery suivant fonctionne dans IE/FF/Opera :

$('#out').focus(function(){
  $('#out').select();
});

Cependant, dans Chrome/Safari, le texte est sélectionné - très brièvement - mais l'événement mouseUp est ensuite déclenché et le texte est désélectionné. La solution de contournement suivante est proposée dans les liens ci-dessus :

$('#out').mouseup(function(e){
  e.preventDefault();
});

Cependant, cette solution de contournement n'est pas bonne pour moi . Je veux sélectionner tout le texte seulement lorsque l'utilisateur met le focus sur la zone de texte. Il doit pourra ensuite sélectionner une partie seulement du texte s'il le souhaite. Quelqu'un peut-il trouver une solution de contournement qui réponde à cette exigence ?

Answer 1

Que pensez-vous de ça ?

$('#out').focus(function () {
    $('#out').select().mouseup(function (e) {
        e.preventDefault();
        $(this).unbind("mouseup");
    });
});

Answer 2

La réponse acceptée (et pratiquement toutes les autres solutions que j'ai trouvées jusqu'à présent) ne fonctionne pas avec le focus clavier, c'est-à-dire en appuyant sur la touche tabulation, du moins pas dans mon Chromium 21. J'utilise l'extrait suivant à la place :

$('#out').focus(function () {
  $(this).select().one('mouseup', function (e) {
    $(this).off('keyup');
    e.preventDefault();
  }).one('keyup', function () {
    $(this).select().off('mouseup');
  });
});

e.preventDefault() en el keyup o focus n'aide pas, donc la désélection après un focus clavier semble ne pas se produire dans leurs gestionnaires par défaut, mais plutôt quelque part entre le gestionnaire focus y keyup événements.

Comme suggéré par @BarelyFitz, il serait peut-être préférable de travailler avec des événements nommés afin de ne pas délier accidentellement d'autres gestionnaires d'événements. Remplacer 'keyup' avec 'keyup.selectText' y 'mouseup' avec 'mouseup.selectText' pour ça.

Answer 3

Pourquoi pas simplement :

$('#out').focus(function(){
    $(this).one('mouseup', function() {
        $(this).select();
    });
});

Il semble fonctionner dans tous les principaux navigateurs...

Answer 4

Faites un bool . Réglez-le sur true après un événement de focus et le réinitialiser après un événement de mouse up. Lors du passage de la souris, si c'est true vous savez que l'utilisateur vient de sélectionner le champ de texte ; vous savez donc que vous devez empêcher le passage de la souris. Sinon, vous devez la laisser passer.

var textFieldGotFocus = false;

$('#out').focus(function()
{
    $('#out').select();
    textFieldGotFocus = true;
});

$('#out').mouseup(function(e)
{
    if (textFieldGotFocus)
        e.preventDefault();
});

$(document).mouseup(function() { textFieldGotFocus = false; });

Il est important que vous mettiez l'écouteur de mouseup qui réinitialise la variable sur document car il n'est pas garanti que l'utilisateur relâche le bouton de la souris sur le champ de texte.

Answer 5

onclick="var self = this;setTimeout(function() {self.select();}, 0);"