Obtenir le texte sélectionné dans un navigateur, multiplateforme

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

  •  08-06-2019
  •  | 
  •  

Question

L'une des choses que j'aimerais faire dans mon application basée sur un navigateur est de permettre à l'utilisateur de sélectionner du texte (pas dans un <textarea>, juste du texte brut !), et de faire apparaître à mon application une petite barre d'outils qui puis on peut interagir avec le suivant (dans mon cas, ajouter des annotations).

J'ai trouvé beaucoup de choses sur Google qui semblent se concentrer sur l'écriture d'éditeurs WYSIWYG, mais ce n'est pas ce que je veux, et la plupart fonctionnaient sous IE mais pas dans FF2 ou 3.Idéalement, j'aimerais une fonction capable de renvoyer le texte actuellement sélectionné dans la fenêtre du navigateur qui fonctionne dans IE7 (et 6 si possible), FireFox 2 & 3 et Safari 2.Si cela fonctionne dans Opera, ce serait un bonus, mais ce n'est pas une obligation.

Quelqu'un a-t-il une fonction qui fait ça ?Ou une idée de par où commencer ?

Était-ce utile?

La solution

Jettes un coup d'oeil à jQuery et le plugin wrapSélection.C'est peut-être ce que vous recherchez.

Autres conseils

Ce plugin jQuery est sympa mais il accomplit une tâche très spécifique :enveloppez le texte que vous surlignez avec une balise.C'est peut-être exactement ce que vous voulez.Mais si vous ne souhaitez pas (ou si vous ne pouvez pas) ajouter de balisage superflu à votre page, vous pouvez plutôt essayer la solution suivante :

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;
}

Cette fonction renvoie un objet représentant la sélection de texte.Il fonctionne sur tous les navigateurs (même si je soupçonne que les objets qu'il renvoie seront légèrement différents selon le navigateur et ne seront fiables que pour le texte réel du résultat plutôt que pour l'une des propriétés supplémentaires).

Note:J'ai initialement découvert ce fragment de code ici : http://www.codetoad.com/javascript_get_selected_text.asp

Introduction à la gamme contient quelques détails sur la manière dont les différents navigateurs vous donnent accès à la sélection de texte.

Mon expérience est que travailler directement avec ces différentes API est assez maladroit, donc si wrapSélection ça marche pour toi, j'irais avec ça.

De nos jours, cette méthode Cela devrait suffire:

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

Il reviendra '' dans de rares cas, avec des navigateurs très anciens et peut-être dans le cas d'Opera Mini (à tester, cependant, cela peut être obsolète) + voir la note pour UC Browser pour Android.

Le comportement des différents navigateurs en matière de sélection est décrit ici.

Ce code fonctionne dans Safari, IE et Firefox - j'espère qu'il vous sera utile

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top