Gibt es eine Funktion zum Abwählen des gesamten Textes mit JavaScript?

97

Gibt es eine Funktion in Javascript, um die Auswahl des gesamten ausgewählten Textes aufzuheben? Ich denke, es muss eine einfache globale Funktion sein document.body.deselectAll();oder so.

javascript selection Nudel des Todes
quelle

Antworten:

163

Versuche dies:

function clearSelection()
{
 if (window.getSelection) {window.getSelection().removeAllRanges();}
 else if (document.selection) {document.selection.empty();}
}

Dadurch wird eine Auswahl in regulären HTML-Inhalten in jedem wichtigen Browser gelöscht. Eine Auswahl in einer Texteingabe oder <textarea>in Firefox wird nicht gelöscht.

Ankur
quelle
25
Ich kann bestätigen, dass dies window.getSelection().removeAllRanges();in allen aktuellen Browsern funktioniert. Live-Demo: jsfiddle.net/hWMJT/1
Šime Vidas
Sie müssen auf eine Schaltfläche wie <input id = ', aber' type = 'button' value = 'click' / onclick = 'clearSelection ()'> klicken
Ankur
1
@ Šime - nicht wirklich. Es funktioniert, weil die Auswahl verloren geht, wenn die Schaltfläche scharfgestellt wird. Der Proofcode wird kommentiert, die Auswahl wird noch gelöscht.
Schatten-Assistent ist Ohr für Sie
@Shadow Hier ist die richtige Demo: jsfiddle.net/9spL8/3 Die removeAllRanges()Methode funktioniert in allen aktuellen Browsern für Text in Absätzen oder ähnlichen Nicht-Formularfeldelementen. Für Formularfelder (wie Textbereiche) funktioniert diese Methode in IE9 und FF5 nicht.
Šime Vidas
1
Bearbeitet, window.getSelection().removeAllRanges(); zuerst verwenden, da standardkonformer, proprietärer Code immer zuletzt ausgeführt werden sollte . Sei es der Code, der den Standards von 2004 oder 4004 entspricht, wird letztendlich immer das sein, was wir verwenden. Erkennen Sie ihn also ausnahmslos zuerst!
John
26

Hier ist eine Version, die jede Auswahl löscht, auch innerhalb von Texteingaben und Textbereichen:

Demo: http://jsfiddle.net/SLQpM/23/

function clearSelection() {
    var sel;
    if ( (sel = document.selection) && sel.empty ) {
        sel.empty();
    } else {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        }
        var activeEl = document.activeElement;
        if (activeEl) {
            var tagName = activeEl.nodeName.toLowerCase();
            if ( tagName == "textarea" ||
                    (tagName == "input" && activeEl.type == "text") ) {
                // Collapse the selection to the end
                activeEl.selectionStart = activeEl.selectionEnd;
            }
        }
    }
}
Tim Down
quelle
funktioniert nicht, wenn Ihre Auswahl irgendwo in der ersten Zeile beginnt und das größere Textfeld enthält
Vyachaslav Gerchicov
1
@VyachaslavGerchicov: Das liegt wahrscheinlich daran, dass es sich um ein schnelles einfaches Beispiel handelt. Wenn Sie die Auswahl außerhalb des Hauptgeräts beenden, wird <div>das mouseupEreignis nicht ausgelöst. Setzen Sie stattdessen den Mouseup-Handler auf das Dokument und es wäre in Ordnung: jsfiddle.net/SLQpM/23
Tim Down
Dies ist eine großartige Lösung für ältere Browser, die beim Ziehen von Elementen kein vom Benutzer ausgewähltes CSS unterstützen. Rufen Sie clearSelection () in der Maus auf, um den Rückruf zu verschieben.
Geordie
6

Für Internet Explorer können Sie die leere Methode des document.selection-Objekts verwenden:

document.selection.empty ();

Eine browserübergreifende Lösung finden Sie in dieser Antwort:

Deaktivieren Sie eine Auswahl in Firefox

Luke Girvin
quelle
Wenn Ihre Website öffentlich ist (kein Intranet, in dem Sie die Browser steuern), ist dies keine gute Idee, sondern kein Cross-Browser.
Schatten-Assistent ist Ohr für Sie
1
@ Shadow Wizard - wahr, diese Frage kann für eine browserübergreifende Lösung relevant sein: stackoverflow.com/questions/6186844/…
Luke Girvin
@ Luke schön, schade, dass eine andere Website (wahrscheinlich) nicht zwischen verschiedenen Browsern konsistent sein wird, da das OP das genommen hat, was Sie gegeben haben, wie es ist.
Schatten-Assistent ist Ohr für Sie
Meiner Meinung nach ist die Browserkompatibilität etwas Offensichtliches, das von uns angeboten werden sollte - vielen Entwicklern ist nicht einmal bewusst, dass solche Unterschiede bestehen, daher sollten diejenigen, die es wissen, dies mitteilen. Abgesehen davon habe ich nie gesagt, dass Ihre Frage falsch ist , sondern nur fehlt .
Schatten-Assistent ist Ohr für Sie
@ Luke document.selection.clear()funktioniert nur im IE. Siehe hier: jsfiddle.net/9spL8/4 Auch diese Methode entfernt den markierten Text nicht einfach deaktivieren. Verwenden Sie document.selection.empty()stattdessen , um die Auswahl des Texts aufzuheben.
Šime Vidas
0

Für ein textareaElement mit mindestens 10 Zeichen wird im Folgenden eine kleine Auswahl getroffen und nach anderthalb Sekunden die Auswahl aufgehoben:

var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
John
quelle