How to Use jquery to paste cursor-highlighted text into a text input field
<p>My page has a <code>&lt;div&gt;</code> that echos a book script fed from database.</p>

<p>The user is supposed to find some text, highlight it with their cursor, then right-click to expose a custom context menu I got from Andrew Whitaker, Stack/4495626.</p>

<p>The user should then click one of the options in the context menu 
<code>&lt;Idiom&gt;Idiom&lt;/Idiom&gt;</code>, <code>&lt;Proverb&gt;Proverb&lt;/Proverb&gt;</code>, etc, to insert the cursor-highlighted text into the text field <code>id="element"</code>.</p>

<p>User704808: I tried jsfiddle but it wouldn't let the context menu work in that pane, so I've updated with an entire page of code below. The first three test correctly as they are static; it is the dynamic getSelected() that I can't make work. Thanks again.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("div.custom-menu").show();
$(".custom-menu").appendTo("body").css({
top: event.pageY + "px",
left: event.pageX + "px",
visibility: "visible"
});
}).bind("click", function(event) {
if (!$(event.target).is(".custom-menu")) {
    $("div.custom-menu").hide();
}
});
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var getSelected = function(){
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;
}   &lt;/script&gt;
&lt;style&gt;
body {font-family:Verdana, Arial, Helvetica, sans-serif; margin-top:14%;}
.custom-menu { z-index:1000; height:85px; position: absolute; background-color:#F0F0F0;       border-right: 1px solid black;border-bottom: 1px solid black;border-top: 1px solid     white;border-top: 1px solid white; padding: 2px; left: 1103px; top: 12px;visibility:hidden;     }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class='custom-menu'&gt;
&lt;table width="426" cellpadding="6"&gt;
&lt;tr&gt;
&lt;td nowrap="nowrap"&gt;&lt;Idioms&gt;Idioms&lt;/Idioms&gt;&lt;/td&gt;
&lt;td nowrap="nowrap"&gt;&lt;IdiomsSentence&gt;Idioms Sentence&lt;/IdiomsSentence&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td nowrap="nowrap"&gt;&lt;Proverb&gt;Proverbs&lt;/Proverb&gt;&lt;/td&gt;
&lt;td nowrap="nowrap"&gt;&lt;ProverbSentence&gt;Proverbs Sentence&lt;/ProverbSentence&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;form name="form13" method="post"&gt;
&lt;input type="text" class="cleanup" name="element" id="element" value="" size="70" /&gt;
element:&lt;br /&gt;
&lt;input class="cleanup" name="elementSentence" type="text" id="elementSentence" value=""      size="70" /&gt;&lt;/td&gt;&lt;/tr&gt;
elementSentence :&lt;/form&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$("Idioms").click(function(){
$("#element").val("Idioms Test");});

$("IdiomsSentence").click(function(){
$("#elementSentence").val("IdiomsSentence Test");});

$("Proverb").click(function(){
$("#element").val("Proverb Test");});

$("ProverbSentence").click(function(){
$("#elementSentence").val(getSelected());});}); &lt;/script&gt;
&lt;div id="dialogue"&gt;
&lt;ul&gt;
  &lt;li&gt;I have left in place three 'static' test examples that work. Please right-click,   select either 'Idioms', 'Proverbs', or 'IdiomsSentence', and you'll see they insert,   singly, into the form correctly.&lt;br /&gt;
&lt;br /&gt;
&lt;/li&gt;
&lt;li&gt;The one that isn't working is the one that has the getSelected() wherein someone   should drag their cursor over some text like 'There is more than one way to skin a   politician.', then right click, select 'Proverbs Sentence', and it should auto-enter the  second field.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Proverb: There is more than one way to skin a politician.&lt;/p&gt;
&lt;p&gt;Idiom: Actions speak louder than words, but I'm pretty loud anyway.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
