Chegando o texto selecionado em um browser multi-plataforma

StackOverflow https://stackoverflow.com/questions/10478

  •  08-06-2019
  •  | 
  •  

Pergunta

Uma das coisas que eu gostaria de fazer no meu aplicativo baseado em navegador é permitir que o usuário selecionar algum texto (e não em um <textarea>, simplesmente ol' texto!), e tenho a minha aplicação aparecer uma pequena barra de ferramentas que pode então interagir com o próximo (no meu caso, adicionar anotações).

Eu encontrei um monte de coisas no google que parece ser focado em escrever editores WYSIWYG, mas não é isso que eu quero, e mais do que funcionou no IE, mas não no FF2 ou 3.Idealmente, eu gostaria de uma função pode retornar o texto que estiver selecionado na janela do navegador que funciona no IE7 (e 6, se possível), FireFox 2 e 3 e Safari 2.Se ele funciona no Opera, que seria um bônus, mas não é um requisito.

Alguém tem uma função que faz isso?Ou uma ideia de por onde começar?

Foi útil?

Solução

Ter um olhar para jQuery e o wrapSelection plugin.Ele pode ser o que você está procurando.

Outras dicas

Que plugin é legal, mas ele realiza uma tarefa específica:quebrar o texto que você destaque com uma marca.Este pode ser apenas o que você quer.Mas se você não quiser (ou estão em uma situação onde você não pode) adicionar estranhas marcação em sua página, você pode tentar o seguinte solução alternativa:

function getSelectedText() {
  var txt = '';

  if (window.getSelection) {
    txt = window.getSelection();
  }
  else if (document.getSelection) {
    txt = document.getSelection();
  }
  else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  else return; 

  return txt;
}

Esta função retorna um objeto que representa a seleção de texto.Ele funciona em navegadores (apesar de eu suspeitar que os objetos que ele retorna vai ser um pouco diferente dependendo do navegador e só confiável para o texto real do resultado, ao invés de incluir qualquer uma das propriedades adicionais).

Nota:Originalmente, eu descobri que o fragmento de código aqui: http://www.codetoad.com/javascript_get_selected_text.asp

Introdução ao Intervalo apresenta alguns detalhes sobre a forma como diferentes navegadores dará acesso para a seleção de texto.

A minha experiência é que o trabalho com as diferentes APIs diretamente é bastante desajeitado para se wrapSelection funciona para você, eu iria com isso.

Estes dias este método deve ser o suficiente:

function getSelectedText() {
    return window.getSelection ? window.getSelection().toString() : '';
}

Ele vai voltar '' em raras ocasiões, muito antigo navegadores e pode ser no caso do Opera Mini (para ser testado, porém, isso pode estar desatualizado) + consultar a nota para o UC Browser para Android.

O comportamento individual dos navegadores no que respeita à selecção é descrito aqui.

Este código funciona no Safari, IE e Firefox - espero que seja de alguma ajuda

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top