Seleção de texto não criptografado com JavaScript

122

Pergunta simples para a qual não consigo encontrar a resposta: como posso usar JavaScript (ou jQuery) para desmarcar qualquer texto que possa ser selecionado em uma página da web? O usuário do EG clica e arrasta para destacar um pouco de texto - quero ter uma função deselectAll () que limpa essa seleção. Como devo escrever?

Obrigado pela ajuda.

man1
fonte

Respostas:

206
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

Crédito para Y.

Gert Grenander
fonte
4
Isso pressupõe que a existência de document.selectionimplica a existência de um empty()método dele. Você já testou o método em todos os outros casos; portanto, também pode testar emptyno caso final.
Tim Down
Usei isso no meu plugin jquery.tableCheckbox.js , obrigado.
Marco Kerwitz
1
Eu criei um exemplo de trabalho completo com base na sua sugestão, mas adicionando alguns extras jsfiddle.net/mkrivan/hohx4nes A linha mais importante é window.getSelection (). AddRange (document.createRange ()); Sem isso, o IE não desmarca o texto em algumas condições. E eu mudei a ordem da detecção do método.
22617 Miklos Krivan
Você salva meu dia, meu amigo! Eu estava usando o scratchpad e, ao riscar a página inteira, foi selecionada e, com esse bom script, desmarquei minha página antes de usar o plug-in do scratchpad. Basicamente, funciona! Muito obrigado!
Combine
1
Eu acho que window.getSelection().removeAllRanges();funciona bem no IE (edge) e no Safari.
Chile
48

Melhor testar diretamente os recursos que você deseja:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}
Tim Down
fonte
15

Estado dos Assuntos de Não Seleção 2014

Eu fiz algumas pesquisas por conta própria. Aqui está a função que escrevi e estou usando atualmente:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

Basicamente, getSelection().removeAllRanges()atualmente é suportado por todos os navegadores modernos (incluindo o IE9 +). Este é claramente o método correto para avançar.

Os problemas de compatibilidade foram responsáveis ​​por:

  • Versões antigas do Chrome e Safari usadas getSelection().empty()
  • IE8 e abaixo usados document.selection.empty()

Atualizar

Provavelmente, é uma boa ideia agrupar essa funcionalidade de seleção para reutilização.

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

Criei um wiki da comunidade para que você possa adicionar funcionalidade a ele ou atualizar as coisas à medida que os padrões evoluem.

ChaseMoskal
fonte
7
Isso está fazendo o mesmo que a minha resposta. Nada mudou em 4 anos.
Tim Down
3
Horrível. Você não apenas roubou literalmente a implementação de outro pôster, como a destruiu sintaticamente.
kamelkev
1

Aqui está a resposta aceita, mas em duas linhas de código:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

A única verificar que eu não faço é para a existência de removeAllRanges - mas AFAIK não há nenhum navegador que tem tanto window.getSelectionou document.selectionmas não quer ter um .emptyou .removeAllRangespara essa propriedade.

Grinn
fonte
-1

adicione isso ao seu script para impedir o clique com o botão direito e a seleção de texto.

Exceções podem ser adicionadas a var 'om'.

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}
user2180104
fonte