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

Question

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

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

Answer 1

Pour éviter que l'utilisateur s'énerve lorsque l'ensemble du texte est sélectionné à chaque fois qu'ils essaient de déplacer le curseur à l'aide de la souris, vous devez le faire à l'aide de l' focus événement, de ne pas l' click événement. La suivante va faire le travail et fonctionne autour d'un problème de google Chrome qui empêche la version la plus simple (c'est à dire juste appeler le textarea de l' select() méthode de focus gestionnaire d'événement).

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>

la 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;
    });
});

Answer 2

Meilleure façon, avec une solution pour les problèmes 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;
            });
        }
    });
 

Answer 3

J'ai fini par utiliser ceci:

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

Answer 4

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 le boîtier de coin Chrome correctement. Voir http://jsfiddle.net/Ztyx/XMkwm/ pour un exemple.

Answer 5

JQuery: Sélection du texte dans un élément (similaire à la mise en évidence avec votre souris)

:)

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

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