Chegando o texto selecionado em um browser multi-plataforma
-
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?
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...