Get Selected Text on HTML page using jQuery

Question

I have a simple HTML page where I want the selected text inside text area to use it for some processing. I have written jQuery code but I am always getting empty string as selection. Please help me to fix this issue in my code.

HTML code is as given below:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <form action="#" id="formfirst">
        <textarea name="tafirst" rows="10" id="tafirst">Along came Polly ---- Reality Bites ---- Duplex ---- Walter Mitty </textarea>
        <br>
        <input type="text" id="txtfirst">
        <br>
        <input type="submit">
    </form>
</body>
<script type="text/javascript" src="js/verify.js"></script>
</html>

Javascript code is given below:(verify.js)

function getSelectedText(){
    var t = '';
    if(window.getSelection){
        t = window.getSelection();
    }else if(document.getSelection){
        t = document.getSelection();
    }else if(document.selection){
        t = document.selection.createRange().text;
    }
    return t;
}

$(document).ready(function(){  
    //alert("HERE 1");
});
$(document).keypress(function(e){   
    if($('#tafirst').is(':focus')){
        if(e.altKey && e.which==97){
            alert(getSelectedText());
            e.preventDefault();
        }
    }
});

EDIT

I have downloaded rangy plugin and put it inside my js folder. I have included that plugin in my HTML as given below:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/rangy/rangy-1.2.3/rangy-core.js"></script>
</head>
<body>
<form action="#" id="formfirst">
<textarea name="tafirst" rows="10" id="tafirst">Along came Polly ---- Reality Bites ---- Duplex ---- Walter Mitty </textarea>
<br>
<input type="text" id="txtfirst">
<br>
<input type="submit">
</form>
</body>
<script type="text/javascript" src="js/verify.js"></script>
</html>

Corresponding modified js file is as follows:

var range = rangy.createRange();

$(document).ready(function(){  
    alert(range);
    alert("HERE 1");    
});
$(document).keypress(function(e){   
    if($('#tafirst').is(':focus')){
        if(e.altKey && e.which==97){
            alert(getSelectedText());
            e.preventDefault();
        }
    }
});

But it is not even showing any alert message. Have I done anything wrong while adding rangy's js reference?

Try using the [Rangy](https://code.google.com/p/rangy/) plugin by Tim Down. Getting the selected text is a cross-browser nightmare. — Rory McCrossan, Sep 18 '14 at 08:00
@RoryMcCrossan:Edited code to use rangy plugin. It is not working. Please help me to correct my code. — , Sep 19 '14 at 08:29
Getting the selected text is pretty easy, although the code to do it in the question (`getSelectedText`) is not correct because it returns a `Selection` object rather than a string in most browsers. [Here is some better code](http://stackoverflow.com/a/4713197/96100). Rangy uses the same basic method anyway. — Tim Down, Sep 19 '14 at 13:22

score 1 · Accepted Answer · answered Sep 19 '14 at 13:34

Getting selected text from a textarea requires a different API from getting the selected text in the main text of the page in most browsers. You should use the textarea's selectionStart and selectionEnd properties. This method will work for text inputs too:

function getSelectedText(el) {
    var sel, range;
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        return el.value.slice(el.selectionStart, el.selectionEnd);
    } else if (
            (sel = document.selection) &&
            sel.type == "Text" &&
            (range = sel.createRange()).parentElement() == el) {
         return range.text;
    }
    return "";
}

Example:

function getSelectedText(el) {
  var sel, range;
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    return el.value.slice(el.selectionStart, el.selectionEnd);
  } else if (
    (sel = document.selection) &&
    sel.type == "Text" &&
    (range = sel.createRange()).parentElement() == el) {
    return range.text;
  }
  return "";
}

window.onload = function() {
  document.getElementById("ta").onselect = function() {
    alert("Selected text: " + getSelectedText(this));
  };
};

<textarea id="ta" rows="5" cols="50">Please select some text in here</textarea>

Get Selected Text on HTML page using jQuery

1 Answers1