Как получить выделенный текст в textarea?

Я пытаюсь создать свой собственный WYSIWYG редактор. Есть ли способ, как получить текст, который пользователь выбрал в textarea?

Например, если пользователь выбирает какое-то слово и затем нажимает кнопку, как узнать, какой текст был выбран?

Я использую jQuery.

Ответ 1

Попробуйте плагин jquery-fieldselection.

Вы можете скачать его из здесь. Также есть пример.

Ответ 2

Для получения выбранного контента в <textarea> с Firefox:

function getSel() // javascript
{
    // obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    // obtain the selected text
    var sel = txtarea.value.substring(start, finish);
    // do something with the selected content
}

window.getSelection().toString() работал у меня с Chrome, но не с Firefox.

Ссылка:

Ответ 3

Для разных браузеров выбор обработки отличается:

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}

Это дает вам объект диапазона. Каждый диапазон представляет собой один выбор (с помощью клавиши управления/команды можно сделать несколько активных выборов).

Тип объекта диапазона, который у вас есть, зависит от того, какой браузер. Для IE это объект текстового диапазона; для других - объект Selection. Чтобы преобразовать объект Selection в текстовый диапазон, вы можете вызвать getRangeAt; для Safari вам необходимо создать следующее:

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}

Объект range предоставляет вам начальные и конечные элементы dom и смещение текста для выбора.

Более подробную информацию о объектах диапазона можно найти на quirksmode.org здесь

Если вы используете jQuery, вы можете посмотреть в легкий jQuery RTE-плагин от Batiste Bieler. Это может сделать достаточно для ваших нужд или, по крайней мере, дать вам кое-что для начала.

Ответ 4

GetSelection()

Это немного зависит от браузера, см. здесь функцию, которая утверждает, что работает в большинстве случаев: http://snipplr.com/view/775/getselection/

Ответ 5

Небольшая функция, которая получит выбранную строку/текст текстового поля или элемента ввода:

function getInputSelection(elem){
 if(typeof elem != "undefined"){
  s=elem[0].selectionStart;
  e=elem[0].selectionEnd;
  return elem.val().substring(s, e);
 }else{
  return '';
 }
}

Обратите внимание, что для приведенного выше кода требуется jQuery. Пример получения выбранной строки входного элемента с id abc123

getInputSelection($("#abc123"));

Вышеуказанная функция вернет выбранную строку. Если строка не выбрана пользователем, она вернет null.

Дополнительные примеры

getInputSelection($("body").find("input[name=user]"));

В элементах, выбранных с именем класса, возвращается выбранная строка первого элемента массива элементов, а не выбранная строка всех элементов. В конце концов, выбор на странице всегда будет 1.

Ответ 6

function getSel() {
var input = $("#text");
return input.html().toString().substring(getSelection().baseOffset,getSelection().extendOffset);
}