How to get selected text from textbox control with javascript

Question

I have a textbox and a link button. When I write some text, then select some of them and then click the link button, selected text from textbox must be show with a messagebox.

How can I do it?

---

When I click the submit button for textbox below, message box must show Lorem ipsum. Because "Lorem ipsum" is selected in the area.

---

If I select any text from the page and click the submit button it is working, but if I write a text to textbox and make it, it's not. Because when i click to another space, selection of textbox is canceled.

Now problem is that, when i select a text from textbox and click any other control or space, text which is selected is must be still selected.

How it is be done?

Answer 1

OK, here is the code I have:

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

Problem, although the code I give for IE is given on lot of sites, I cannot make it work on my copy of IE6 on my current system. Perhaps it will work for you, that's why I give it.
The trick you look for is probably the .focus() call, to give back to textarea the focus so the selection is re-activated.

[UPDATE] I got the right result (the selection content) with onKeyDown event:

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

So the code is correct. Again, the issue is to get the selection on click on a button... I continue to search.

[UPDATE] I got no success with a button drawn with a li tag, because when we click on it, IE deselects the previous selection. The above code works with a simple input button, though...

Answer 2

Here's a much simpler solution, based on the fact that text selection occurs on mouseup, so we add an event listener for that:

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>

This works in all browsers.

If you also want to handle selection via the keyboard, add another event listener for keyup, with the same code.

If it weren't for this Firefox bug filed back in 2001 (yes, 14 years ago), we could replace the value assigned to window.mySelection with window.getSelection().toString(), which works in IE9+ and all modern browsers, and also gets the selection made in non-textarea parts of the DOM.

Answer 3

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

Answer 4

For Opera, Firefox and Safari, you can use the following function:

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

Then, you just pass a reference to a text field element (like a textarea or input element) to the function:

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

Or, if you want <textarea> and <input> to have a getSelection() function of their own:

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

Then, you'd just do:

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

for example.

Answer 5

Big Fan of jQuery-textrange

Below is a very small, self-contained, example. Down load jquery-textrange.js and copy to the same folder.

<!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>

Answer 6

//Jquery
var textarea = $('#post-content'); 
var selectionStart = textarea.prop('selectionStart');
var selectionEnd = textarea.prop('selectionEnd');
var selection = (textarea.val()).substring(selectionStart,selectionEnd);

//Javascript
var textarea = document.getElementById("post-content");   
var selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);