Displaying the selected text in text area

Question

function ShowSelection()
{
    var textComponent = document.getElementById('TextArea1');
    var selectedText;
    if (document.selection != undefined) {
        textComponent.focus();
        var sel = document.selection.createRange();
        selectedText = sel.text;
    }
    else if (textComponent.selectionStart != undefined) {
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
        selectedText = textComponent.value.substring(startPos,endPos)
    }
    alert("You selected: " + selectedText)
}
</script>

<asp:TextBox id="TextArea1" TextMode="MultiLine" runat="server">/asp:TextBox>
<a href="#" onclick=alert(ShowSelection());>Click here to display the selected text</a>

Here I am trying to display the selected text by user. I need to display the text which is selected by user.But unfortunately event is not triggering.. Any wrong in this code. Please give me solution..

you need to access the asp servercontrols in Js using the following way `var textComponent = document.getElementById('<%=TextArea1.ClientID %>');` — Krsna Kishore, Mar 23 '16 at 06:45
the above javascript code seems to work fine with the basic html, you are selecting the text in the wrong way , have a look here :http://stackoverflow.com/questions/1612413/retrieve-value-from-asptextbox-with-jquery — Vikas, Mar 23 '16 at 07:02

score 1 · Accepted Answer · answered Mar 23 '16 at 06:56

Your same code worked for me in fiddle, just not asp.net :

    <script>
  function ShowSelection() {
    var textComponent = document.getElementById('TextArea1');
    var selectedText;
    if (document.selection != undefined) {
      textComponent.focus();
      var sel = document.selection.createRange();
      selectedText = sel.text;
    } else if (textComponent.selectionStart != undefined) {
      var startPos = textComponent.selectionStart;
      var endPos = textComponent.selectionEnd;
      selectedText = textComponent.value.substring(startPos, endPos)
    }
    alert("You selected: " + selectedText)
  }

</script>

<input id="TextArea1" type="textarea" />
<a href="ShowSelection()" onclick="ShowSelection()">click me </a>

Point is Why are you calling alert on ShowSelection() function again, that function itself is alerting, not returning any string value.

Please check.

score 0 · Answer 2 · edited May 23 '17 at 11:58

Few Suggestions:

Here in your code TextArea1 is an ASP control, You will not get or set it's value like as you did in the given code. To make it working you can do any of the following:

Change the Asp textBox to an HTML TextBot: so the tag will be like the following:
```
 <input type="text" id="TextArea1"/> 
```

include runat="server" if you want to access it in back-end

Change the script to get the value properly as like Webruster suggested in the comment. or From this reference
```
var textComponent = document.getElementById('<%=TextArea1.ClientID %>');
```
One more thing i have to say is that, the anchor tag. no need to show an extra alert because of two reasons:
- The method is not returning anything
- Content is already alerted inside the called method

So the <a> will be like the following:

<a href="#" onclick=ShowSelection();>Click here to display the selected text</a>

Hey Sorry. Previously it didn't came. But now its coming fine. but not able to display the selected data. — kiran, Mar 23 '16 at 09:47

Displaying the selected text in text area

2 Answers2