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

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.

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

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

J'ai fini par utiliser ceci:

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

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

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.

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