web-dev-qa-db-fra.com

jQuery - sélectionne 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 éventuellement, lorsque vous cliquez à nouveau, pour le désélectionner.

javascriptjqueryformstextareaselection
127
Alex

Pour empêcher l'utilisateur d'être ennuyé lorsque tout le texte est sélectionné chaque fois qu'il tente de déplacer le curseur à l'aide de la souris, vous devez le faire en utilisant l'événement focus et non l'événement click. Ce qui suit fera le travail et contournera un problème dans Chrome qui empêche la version la plus simple (par exemple, d'appeler simplement la méthode select() de textarea) _ dans un événement focus gestionnaire) de travailler.

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;
    });
});
191
Tim Down

Meilleure façon, avec la solution de tabulation et chrome et 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;
            });
        }
    });
14
Matiesky

J'ai fini par utiliser ceci:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});
11
Alex
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});
5
Phil LaNasa

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 cas d'angle Chrome. Voir http://jsfiddle.net/Ztyx/XMkwm/ pour un exemple.

5
Ztyx

Sélection du texte dans un élément (s'apparente à la surbrillance avec votre souris)

:)

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

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