Existe uma função para desmarcar todo o texto usando JavaScript?

98

Existe uma função em javascript para apenas desmarcar todo o texto selecionado? Acho que deve ser uma função global simples como document.body.deselectAll();ou algo assim.

javascript selection NoodleOfDeath
fonte

Respostas:

163

Experimente isto:

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

Isso limpará uma seleção no conteúdo HTML regular em qualquer navegador principal. Não limpará uma seleção em uma entrada de texto ou <textarea>no Firefox.

Ankur
fonte
25
Posso confirmar que window.getSelection().removeAllRanges();funciona em todos os navegadores atuais. Demonstração ao vivo: jsfiddle.net/hWMJT/1
Šime Vidas
você tem que clicar em um botão como <input id = 'mas' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur
1
@ Šime - não realmente. Está "funcionando" porque a seleção é perdida quando o botão obtém o foco. Prova - o código é comentado, a seleção ainda está desmarcada.
Shadow Wizard is Ear For You
@Shadow Aqui está a demonstração apropriada: jsfiddle.net/9spL8/3 O removeAllRanges()método funciona em todos os navegadores atuais para texto dentro de parágrafos ou elementos de campo não-formulário semelhantes. Para campos de formulário (como textarea), este método não funciona no IE9 e FF5.
Šime Vidas
1
Editado, use window.getSelection().removeAllRanges(); primeiro porque é compatível com os padrões, o código proprietário deve sempre ser executado por último . Seja o ano de 2004 ou 4004, o código compatível com os padrões sempre será o que usamos, portanto, detecte-o primeiro, sem exceção!
John
27

Esta é uma versão que irá limpar qualquer seleção, incluindo entradas de texto e áreas de texto:

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
fonte
não funciona se sua seleção começar em algum lugar da primeira linha e incluir o campo de texto maior
Vyachaslav Gerchicov
1
@VyachaslavGerchicov: Provavelmente porque é um exemplo simples feito rapidamente e se você encerrar a seleção fora do principal <div>, o mouseupevento não dispara. Em vez disso, coloque o manipulador de mouseup no documento e não haverá problema: jsfiddle.net/SLQpM/23
Tim Down
Esta é uma ótima solução em navegadores mais antigos que não suportam CSS selecionado pelo usuário ao arrastar elementos. Chame clearSelection () no retorno de chamada de movimento do mouse.
Geordie
6

Para o Internet Explorer, você pode usar o método vazio do objeto document.selection:

document.selection.empty ();

Para uma solução para vários navegadores, veja esta resposta:

Limpe uma seleção no Firefox

Luke Girvin
fonte
Se o seu site for público (não a intranet onde você controla os navegadores), não é uma boa ideia, não é um navegador cruzado.
Shadow Wizard is Ear For You
1
@Shadow Wizard - verdade, esta questão pode ser relevante para uma solução para vários navegadores: stackoverflow.com/questions/6186844/…
Luke Girvin
@Luke legal, uma pena que outro site vai (provavelmente) não ser consistente entre navegadores diferentes, já que o OP pegou o que você deu no estado em que se encontra.
Shadow Wizard is Ear For You
Na minha opinião, a compatibilidade do navegador é algo óbvio que deveria ser oferecido por nós - muitos desenvolvedores nem estão cientes de que essas diferenças existem, então aqueles que sabem devem informá-los. Tirando isso, eu nunca disse que sua pergunta estava errada , apenas faltando .
Shadow Wizard is Ear For You
@Luke document.selection.clear()funciona apenas no IE. Veja aqui: jsfiddle.net/9spL8/4 Além disso, este método irá remover o texto selecionado, não apenas desmarcá-lo. Para apenas desmarcar o texto, use document.selection.empty().
Šime Vidas
0

Para um textareaelemento com pelo menos 10 caracteres, o seguinte fará uma pequena seleção e, depois de um segundo e meio, desmarcará:

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

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