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

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

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

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

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

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

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

35
html javascript selectedtext textarea textselection

5 ответов

хорошо, вот код, который у меня есть:

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 () вызов, чтобы вернуть textarea фокус, чтобы выбор был повторно активирован.

[UPDATE] я получил правильный результат (содержимое выбора) с onKeyDown событие:

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

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

[UPDATE] у меня нет успеха с кнопкой, нарисованной с помощью li тег, потому что, когда мы нажимаем на него, IE отменяет предыдущий выбор. Приведенный выше код работает с простым , хотя...

38

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

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.

15

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" />
3

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

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

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

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());

например.

2

большой поклонник 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>
1