jQuery - sélectionnez tout le texte d'une zone de texte


130

Comment puis-je faire en sorte que lorsque vous cliquez dans une zone de texte, tout son contenu est sélectionné?

Et finalement, lorsque vous cliquez à nouveau, pour le désélectionner.



5
@Blender: Non, cette question concerne la mise en évidence du texte dans un élément, pas une zone de texte. Les deux sont assez différents.
Tim Down

Réponses:


194

Pour empêcher l'utilisateur de s'énerver lorsque tout le texte est sélectionné à chaque fois qu'il essaie de déplacer le curseur à l'aide de sa souris, vous devez le faire en utilisant l' focusévénement, pas l' clickévénement. Ce qui suit fera le travail et contournera un problème dans Chrome qui empêche la version la plus simple (c.-à-d. Appeler simplement la select()méthode de textarea dans un focusgestionnaire d'événements) de fonctionner.

jsFiddle: http://jsfiddle.net/NM62A/

Code:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

Version jQuery:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
Je pense qu'il est préférable de mettre en œuvre ce truc en utilisant un bouton séparé "sélectionner tout le texte" car la sélection automatique du texte sur le focus ou les événements de clic est vraiment ennuyeux.
RobG

2
cela échoue pour moi dans Chrome, la solution de travail est: stackoverflow.com/a/6201757/126600
zack

@zack: L'exemple jsFiddle de cette réponse fonctionne pour moi dans Chrome. N'est-ce pas pour vous? Je suis d'accord que la réponse à laquelle vous avez lié est plus infaillible.
Tim Down

@TimDown: vous avez raison, j'étais un peu trop zélé - en fait cela fonctionne correctement sur `` clic '', mais échoue si vous entrez tabdans la zone de texte - votre autre solution fonctionne pour les deux cas :)
zack

Changez légèrement le code ci-dessus et cela fonctionnera comme un charme .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); vous devez faire référence à la zone de texte sans utiliser thissimplement le renvoyer avec le chemin complet .. et cela fonctionnera ..
pratikabu

14

Meilleure façon, avec une solution au problème de tabulation et de chrome et une nouvelle méthode jquery

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

J'ai fini par utiliser ceci:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

mais je ne sais pas comment vérifier si le texte est déjà sélectionné, donc je peux inverser les deux actions :(
Alex

1
@Alex: Je ne dérangerais pas trop ça si j'étais toi. Les utilisateurs attendent un comportement standard des zones de texte.
Tim Down

non, cette zone de texte particulière est uniquement destinée au copier-coller. tout le texte que j'ai à l'intérieur est une grosse chaîne cryptée qui ne peut être soit entièrement remplacée, soit copiée dans le presse
Alex

@Alex: Ah, c'est vrai. Vous voudrez peut-être le rendre en lecture seule en ajoutant ensuite l' readonlyattribut.
Tim Down

1
@Hollister: Non, il est parfaitement possible pour l'utilisateur ou le script de sélectionner du contenu dans un div. Vous envisagez probablement de copier dans le presse-papiers, ce qui n'est pas possible dans un script sans une bibliothèque Flash comme ZeroClipboard.
Tim Down

6
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

5

Version jQuery légèrement plus courte:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Il gère correctement le boîtier d'angle Chrome. Voir http://jsfiddle.net/Ztyx/XMkwm/ pour un exemple.


4

Sélection de texte dans un élément (semblable à la mise en évidence avec votre souris)

:)

En utilisant la réponse acceptée sur ce message, vous pouvez appeler la fonction comme ceci:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

Peut-être que signaler cette question comme un doublon pourrait être plus utile? Ce n'était pas vraiment votre réponse, il vaudrait donc mieux fusionner les deux questions.
Blender

D'accord - Bien que le PO puisse bénéficier de l'explication supplémentaire pour sa mise en œuvre. :)
Todd

Cette question concerne la mise en évidence d'un texte dans un élément, pas une zone de texte. Les deux sont assez différents.
Tim Down

merci, j'ai découvert que je peux faire ça avec $(this).select(), je vais l'utiliser parce que c'est moins de code :)
Alex
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.