it-swarm.com.de

jQuery - wählt den gesamten Text aus einem Textbereich aus

Wie kann ich dafür sorgen, dass beim Klicken in ein Textfeld dessen gesamter Inhalt ausgewählt wird?

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

127
Alex

Damit sich der Benutzer nicht ärgert, wenn der gesamte Text jedes Mal ausgewählt wird, wenn er versucht, das Caret mit der Maus zu bewegen, sollten Sie dies mit dem Ereignis focus und nicht mit dem Ereignis click tun. Das Folgende erledigt die Aufgabe und umgeht ein Problem in Chrome), das die einfachste Version verhindert (dh nur das Aufrufen der select() -Methode des Textbereichs in einem focus -Ereignis) Handler) von der Arbeit.

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

Besserer Weg, mit Lösung zu tab und chrome problem 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;
            });
        }
    });
14
Matiesky

Am Ende habe ich Folgendes verwendet:

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

Etwas kürzere jQuery-Version:

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

Es behandelt den Eckfall Chrome korrekt. Siehe http://jsfiddle.net/Ztyx/XMkwm/ für ein Beispiel.

5
Ztyx

Auswählen von Text in einem Element (ähnlich wie Hervorheben mit der Maus)

:)

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

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