Czy istnieje funkcja do odznaczania całego tekstu za pomocą JavaScript?

100

Czy w javascript jest funkcja umożliwiająca po prostu odznaczenie całego zaznaczonego tekstu? Wydaje mi się, że to musi być prosta funkcja globalna, taka document.body.deselectAll();czy coś.

javascript selection NoodleOfDeath
źródło

Odpowiedzi:

166

Spróbuj tego:

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

Spowoduje to wyczyszczenie zaznaczenia w zwykłej zawartości HTML w dowolnej większej przeglądarce. Nie usunie zaznaczenia w polu wprowadzania tekstu ani <textarea>w przeglądarce Firefox.

Ankur
źródło
25
Mogę potwierdzić, że window.getSelection().removeAllRanges();działa we wszystkich obecnych przeglądarkach. Demo na żywo: jsfiddle.net/hWMJT/1
Šime Vidas
musisz kliknąć przycisk taki jak <input id = 'ale' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur
1
@ Šime - nie bardzo. To „działa”, ponieważ wybór jest tracony, gdy przycisk staje się aktywny. Dowód - kod jest komentowany, wybór jest nadal wyczyszczony.
Shadow Wizard is Ear For You
@Shadow Oto poprawne demo: jsfiddle.net/9spL8/3 Ta removeAllRanges()metoda działa we wszystkich obecnych przeglądarkach dla tekstu w akapitach lub podobnych elementów niebędących polami formularza. W przypadku pól formularzy (takich jak textarea) ta metoda nie działa w IE9 i FF5.
Šime Vidas
1
Edytowane, użyj jako window.getSelection().removeAllRanges(); pierwsze, ponieważ jest zgodny ze standardami, zastrzeżony kod powinien być zawsze wykonywany jako ostatni . Niezależnie od tego, czy kod zgodny ze standardami 2004 czy 4004 zawsze będzie tym, czego używamy, więc najpierw go wykryj bez wyjątku!
John
27

Oto wersja, która wyczyści wszystkie zaznaczenia, w tym w obszarze wprowadzania tekstu i obszarach tekstu:

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
źródło
nie działa, jeśli wybór zaczyna się gdzieś od pierwszej linii i zawiera większe pole tekstowe
Vyachaslav Gerchicov
1
@VyachaslavGerchicov: To pewnie dlatego, że to szybko robione prosty przykład i jeśli zakończyć zaznaczanie poza głównym <div>wówczas mouseupzdarzenie nie ognia. Zamiast tego umieść
Tim Down
Jest to świetne obejście w starszych przeglądarkach, które nie obsługują CSS wybieranego przez użytkownika podczas przeciągania elementów. Wywołaj clearSelection () w wywołaniu zwrotnym ruchu myszy.
Geordie
6

W przypadku przeglądarki Internet Explorer można użyć pustej metody obiektu document.selection:

document.selection.empty ();

W przypadku rozwiązania obejmującego wiele przeglądarek zapoznaj się z tą odpowiedzią:

Wyczyść zaznaczenie w przeglądarce Firefox

Luke Girvin
źródło
Jeśli Twoja witryna jest publiczna (nie intranetowa, w której kontrolujesz przeglądarki), to nie jest dobry pomysł, nie jest to cross browser.
Shadow Wizard is Ear For You
1
@Shadow Wizard - prawda, to pytanie może być istotne w przypadku rozwiązania z
różnymi
@Luke miło, szkoda, że ​​inna witryna będzie (prawdopodobnie) niespójna w różnych przeglądarkach, ponieważ OP zabrał to, co podałeś w obecnej postaci.
Shadow Wizard is Ear For You
Moim zdaniem kompatybilność przeglądarek to coś oczywistego, co powinniśmy zaoferować - wielu programistów nawet nie zdaje sobie sprawy, że takie różnice istnieją, więc ci, którzy wiedzą, powinni im o tym powiedzieć. Pomijając to, nigdy nie powiedziałem, że twoje pytanie jest błędne , po prostu brakuje .
Shadow Wizard is Ear For You
@Luke document.selection.clear()działa tylko w IE. Zobacz tutaj: jsfiddle.net/9spL8/4 Ponadto ta metoda usunie zaznaczony tekst, a nie tylko odznaczy go. Aby po prostu odznaczyć tekst, użyj document.selection.empty()zamiast tego.
Šime Vidas
0

W przypadku textareaelementu składającego się z co najmniej 10 znaków następujące czynności dokonają niewielkiego wyboru, a po półtorej sekundy odznaczy to:

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

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
Jan
źródło