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

130

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.

Alex
quelle
5
@Blender: Nein, diese Frage betrifft das Hervorheben von Text in einem Element, nicht in einem Textbereich. Die beiden sind sehr unterschiedlich.
Tim Down

Antworten:

194

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;
    });
});
Tim Down
quelle
10
Ich denke, es ist besser, dieses Zeug mit einer separaten Schaltfläche "Alle Texte auswählen" zu implementieren, da die automatische Auswahl des Textes bei Fokus- oder Klickereignissen wirklich ärgerlich ist.
RobG
2
Dies schlägt für mich in Chrome fehl. Die funktionierende Lösung lautet: stackoverflow.com/a/6201757/126600
zack
@zack: Das jsFiddle-Beispiel in dieser Antwort funktioniert für mich in Chrome. Ist es nicht für dich? Ich bin damit einverstanden, dass die Antwort, auf die Sie verlinkt haben, narrensicherer ist.
Tim Down
@ TimDown: Sie haben Recht, ich war ein bisschen übereifrig - eigentlich funktioniert es richtig auf "Klick", aber schlägt fehl, wenn Sie tabin den Textbereich - die Ihre andere Lösung funktioniert für beide Fälle :)
zack
Ändern Sie den obigen Code leicht und es wird wie ein Zauber funktionieren .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); Sie müssen das Textfeld verweisen, ohne es thisnur mit vollem Pfad zu verweisen .. und es wird funktionieren ..
pratikabu
14

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;
            });
        }
    });
Matiesky
quelle
11

Am Ende habe ich Folgendes verwendet:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});
Alex
quelle
aber ich weiß nicht, wie ich überprüfen soll, ob der Text bereits ausgewählt ist, also kann ich die beiden Aktionen umkehren :(
Alex
1
@ Alex: Ich würde mich nicht zu sehr damit anlegen, wenn ich du wäre. Benutzer erwarten Standardverhalten von Textbereichen.
Tim Down
Nein, dieser spezielle Textbereich ist nur zum Kopieren und Einfügen gedacht. Der gesamte Text, den ich darin habe, ist eine große verschlüsselte Zeichenfolge, die entweder nur vollständig ersetzt oder in die Zwischenablage kopiert werden kann
Alex
@ Alex: Ah, richtig. Möglicherweise möchten Sie es schreibgeschützt machen, indem Sie das readonlyAttribut dann hinzufügen .
Tim Down
1
@ Hollister: Nein, es ist durchaus möglich, dass Benutzer oder Skripte Inhalte innerhalb eines Div auswählen. Sie denken wahrscheinlich daran, in die Zwischenablage zu kopieren, was im Skript ohne eine Flash-basierte Bibliothek wie ZeroClipboard nicht möglich ist.
Tim Down
6
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});
Phil LaNasa
quelle
5

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/ .

Ztyx
quelle
4

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');
  });
});
Todd
quelle
Vielleicht ist es sinnvoller, diese Frage als Duplikat zu kennzeichnen? Es war nicht wirklich Ihre Antwort, daher ist es besser, die beiden Fragen zusammenzuführen.
Blender
Einverstanden - Obwohl das OP von der zusätzlichen Erklärung für ihre Implementierung profitieren könnte. :)
Todd
Diese Frage betrifft das Hervorheben von Text in einem Element, nicht in einem Textbereich. Die beiden sind sehr unterschiedlich.
Tim Down
danke, ich habe herausgefunden, dass ich das machen kann $(this).select(), ich werde das verwenden, weil es weniger Code ist :)
Alex