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