jQuery - Wählen Sie den gesamten Text aus einem Textbereich aus

Wie kann ich es so gestalten, dass beim Klicken in ein Textfeld der gesamte Inhalt ausgewählt wird?

Und schließlich, wenn Sie erneut klicken, um die Auswahl aufzuheben.

Um zu verhindern, dass sich der Benutzer ärgert, wenn der gesamte Text jedes Mal ausgewählt wird, wenn er versucht, das Caret mit der Maus zu bewegen, sollten Sie dies über das focusEreignis und nicht über das clickEreignis tun . Das Folgende erledigt den Job und umgeht ein Problem in Chrome, das verhindert, dass die einfachste Version (dh nur das Aufrufen der select()Methode des Textbereichs in einem focusEreignishandler) funktioniert.

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>

jQuery-Version:

$("#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;
    });
});

Besserer Weg, mit Lösung für Tab- und Chrome-Probleme und neuem JQuery-Weg

$("#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;
            });
        }
    });

Am Ende habe ich Folgendes verwendet:

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

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

Etwas kürzere jQuery-Version:

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

Es behandelt das Chrome-Eckgehäuse korrekt. Ein Beispiel finden Sie unter http://jsfiddle.net/Ztyx/XMkwm/ .

Text in einem Element auswählen (ähnlich wie mit der Maus hervorheben)

:) :)

Mit der akzeptierten Antwort auf diesen Beitrag können Sie die Funktion folgendermaßen aufrufen:

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