Как получить выделенный текст из текстового поля управления с помощью JavaScript - PullRequest
Новая
       60

Как получить выделенный текст из текстового поля управления с помощью JavaScript

36 голосов
/ 09 ноября 2008

У меня есть текстовое поле и кнопка ссылки. Когда я пишу некоторый текст, затем выбираю некоторые из них и затем нажимаю кнопку ссылки, выделенный текст из текстового поля должен отображаться с окном сообщения.

Как я могу это сделать?

Когда я нажимаю кнопку отправки для текстового поля ниже, в окне сообщения должен отображаться Lorem ipsum. Потому что в области выбран «Lorem ipsum».

Если я выберу любой текст со страницы и нажму кнопку отправки, он будет работать, но если я напишу текст в текстовое поле и сделаю его, это не так. Потому что, когда я нажимаю на другое место, выбор текстового поля отменяется.

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

Как это сделать?

Ответы [ 5 ]

38 голосов
/ 09 ноября 2008

ОК, вот мой код: 

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  {// Standards Compliant Version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

Проблема, хотя код, который я даю для IE, приведен на многих сайтах, я не могу заставить его работать на моей копии IE6 в моей текущей системе. Возможно, это будет работать для вас, поэтому я даю это.
Трюк, который вы ищите, это, вероятно, вызов .focus (), чтобы вернуть текстовой области фокус, чтобы выбор снова был активирован.

[ОБНОВЛЕНИЕ] Я получил правильный результат (содержимое выбора) с событием onKeyDown: 

document.onkeydown = function (e) { ShowSelection(); }

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

[ОБНОВЛЕНИЕ] Я не добился успеха с кнопкой, нарисованной с тегом li, потому что, когда мы нажимаем на нее, IE отменяет предыдущий выбор. Приведенный выше код работает с простой кнопкой input, хотя ...

16 голосов
/ 04 сентября 2015

Вот гораздо более простое решение, основанное на том факте, что выделение текста происходит при наведении мыши, поэтому мы добавляем для этого прослушиватель событий: 

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

Это работает во всех браузерах.

Если вы также хотите обрабатывать выделение с помощью клавиатуры, добавьте еще один прослушиватель событий для keyup с тем же кодом.

Если бы не эта ошибка Firefox, поданная еще в 2001 (да, 14 лет назад), мы могли бы заменить значение, присвоенное window.mySelection, на window.getSelection().toString(), которое работает в IE9 + и все современные браузеры, а также получает выбор, сделанный в нетекстовых частях DOM.

4 голосов
/ 16 марта 2014 

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />
2 голосов
/ 09 ноября 2008

Для Opera, Firefox и Safari вы можете использовать следующую функцию: 

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

Затем вы просто передаете ссылку на элемент текстового поля (например, текстовое поле или элемент ввода) в функцию: 

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

Или, если вы хотите, чтобы 

HTMLTextAreaElement.prototype.getSelection = HTMLInputElement.prototype.getSelection = function() {
    var ss = this.selectionStart;
    var se = this.selectionEnd;
    if (typeof ss === "number" && typeof se === "number") {
        return this.value.substring(this.selectionStart, this.selectionEnd);
    }
    return "";
};

Тогда вы просто сделаете: 

alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());

например.

1 голос
/ 04 июня 2014

Большой поклонник jQuery-textrange

Ниже приведен очень маленький, самостоятельный пример. Загрузите jquery-textrange.js и скопируйте в ту же папку. 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>

<script>
/* run on document load **/
$(document).ready(function() {
    /* run on any change of 'textarea' **/
    $('#textareaId').bind('updateInfo keyup mousedown mousemove mouseup', function() {
        /* The magic is on this line **/
        var range = $(this).textrange();
        /* Stuff into selectedId.  I wanted to store this is a input field so it can be submitted in a form. **/
        $('#selectedId').val(range.text);
    });
});
</script>
</head>
<body>

    The smallest example possible using 
    <a href="https://github.com/dwieeb/jquery-textrange">
       jquery-textrange
    </a><br/>
    <textarea id="textareaId" >Some random content.</textarea><br/>
    <input type="text"  id="selectedId"  ></input>

</body>
</html>
...