Получение выделенного текста в браузере, кроссплатформенный

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

  •  08-06-2019
  •  | 
  •  

Вопрос

Одна из вещей, которые я хотел бы сделать в своем браузерном приложении, - это разрешить пользователю выбирать некоторый текст (не в <textarea>, просто обычный старый текст!), и пусть в моем приложении появится небольшая панель инструментов, которая затем сможет взаимодействовать со следующей (в моем случае, добавлять аннотации).

Я нашел много материалов в Google, которые, похоже, сосредоточены на написании WYSIWYG-редакторов, но это не то, чего я хочу, и большая часть этого работала в IE, но не в FF2 или 3.В идеале мне бы нужна какая-нибудь функция, которая может возвращать выбранный в данный момент текст в окне браузера, который работает в IE7 (и 6, если возможно), FireFox 2 и 3 и Safari 2.Если это работает в Opera, это было бы бонусом, но это не обязательное условие.

У кого-нибудь есть функция, которая это делает?Или есть идея, с чего начать?

Это было полезно?

Решение

Взгляните на jQuery и тот Плагин для выбора оболочки.Возможно, это то, что вы ищете.

Другие советы

Этот плагин jQuery классный, но он выполняет очень специфическую задачу:оберните выделенный текст тегом.Возможно, это как раз то, чего вы хотите.Но если вы не хотите (или находитесь в ситуации, когда не можете) добавлять на свою страницу какую-либо постороннюю разметку, вы можете попробовать следующее решение:

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

Эта функция возвращает объект, представляющий выделенный текст.Он работает в разных браузерах (хотя я подозреваю, что объекты, которые он возвращает, будут немного отличаться в зависимости от браузера и зависят только от фактического текста результата, а не от каких-либо дополнительных свойств).

Примечание:Первоначально я обнаружил этот фрагмент кода здесь: http://www.codetoad.com/javascript_get_selected_text.asp

Введение в ассортимент содержит некоторые подробности о том, как различные браузеры предоставляют вам доступ к выделенному тексту.

Мой опыт показывает, что прямая работа с этими различными API довольно неуклюжа, поэтому, если Выбор оболочки для вас это работает, я бы согласился с этим.

В наши дни этот метод должно быть достаточно:

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

Он вернется '' в редких случаях для действительно старых браузеров и, возможно, в случае Opera Mini (однако, это необходимо протестировать, возможно, оно устарело) + смотрите Примечание для UC Browser для Android.

Поведение отдельных браузеров в отношении выбора является изложено здесь.

Этот код работает в Safari, IE и Firefox - надеюсь, он вам поможет

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top