javascripthtmltextareatextselectionselectedtext

How to get selected text from a textbox control with JavaScript


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

How can I do it?


When I click the submit button for the textbox below, the 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, the selection of textbox is canceled.

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

How is it to be done?


Solution

  • 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)
      { // Internet Explorer version
        textComponent.focus();
        var sel = document.selection.createRange();
        selectedText = sel.text;
      }
    
      alert("You selected: " + selectedText);
    }
    

    The problem is, although the code I give for Internet Explorer is given on a lot of sites, I cannot make it work on my copy of Internet Explorer 6 on my current system. Perhaps it will work for you, and that's why I give it.

    The trick you look for is probably the .focus() call to give the focus back to the textarea, so the selection is reactivated.

    I got the right result (the selection content) with the 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.

    I didn't have any success with a button drawn with a li tag, because when we click on it, Internet Explorer deselects the previous selection. The above code works with a simple input button, though...