How to Use jquery to paste cursor-highlighted text into a text input field

Question

My page has a <div> that echos a book script fed from database.

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.

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

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(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();
}
});
</script>
<script type="text/javascript">
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;
}   </script>
<style>
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;     }
</style>
</head>
<body>
<div class='custom-menu'>
<table width="426" cellpadding="6">
<tr>
<td nowrap="nowrap"><Idioms>Idioms</Idioms></td>
<td nowrap="nowrap"><IdiomsSentence>Idioms Sentence</IdiomsSentence></td>
</tr>
<tr>
<td nowrap="nowrap"><Proverb>Proverbs</Proverb></td>
<td nowrap="nowrap"><ProverbSentence>Proverbs Sentence</ProverbSentence></td>
</tr>
</table></div>
<form name="form13" method="post">
<input type="text" class="cleanup" name="element" id="element" value="" size="70" />
element:<br />
<input class="cleanup" name="elementSentence" type="text" id="elementSentence" value=""      size="70" /></td></tr>
elementSentence :</form>
<script type="text/javascript">
$(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());});}); </script>
<div id="dialogue">
<ul>
  <li>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.<br />
<br />
</li>
<li>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.</li>
</ul>
<p>Proverb: There is more than one way to skin a politician.</p>
<p>Idiom: Actions speak louder than words, but I'm pretty loud anyway.</p>
</div>
</body>
</html>

possible duplicate of [get highlighted text using jquery .select()?](http://stackoverflow.com/questions/12211964/get-highlighted-text-using-jquery-select) — hjpotter92, Jan 29 '13 at 01:55
Hi, thanks. I checked that out on jsfiddle, but that is creating an alert when existing text in an input field is selected. I'm trying to take text from the page and insert it to the field and though the codes are similar, it isn't working for me. Something else may be happening. — AllThisOnAnACER, Jan 29 '13 at 13:51
Yes, I inserted the getSelected() into the field as shown (now) above and it isn't inserting to the input field. The entire sequence is in my edited request above. Thanks for following up. — AllThisOnAnACER, Jan 29 '13 at 14:22
So, is this right? You have other content on the page. The user highlights some of it and right-clicks. Noun, verb etc appear as context options. If any of them are clicked, the highlighted text is copied into the input element? This might benefit from your setting up a jsfiddle with enough of the content and styles present for folks to see better what you are trying to do. — weir, Jan 29 '13 at 15:28
That's a good idea. I'll get back from this meeting and go for that. — AllThisOnAnACER, Jan 29 '13 at 15:35
User704808 I've edited it above as a web page. Please see my note to you. — AllThisOnAnACER, Jan 29 '13 at 18:44

score 3 · Accepted Answer · edited May 23 '17 at 11:44

EDIT: Replaced entire answer for brevity and clarity.

Make these changes to the HTML document in your question:

Replace the two script blocks in the head with one containing this:

dialogApp = {};

dialogApp.getSelectedHtml = function () {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

$(document).bind("contextmenu", function (event) {
    dialogApp.selection = dialogApp.getSelectedHtml();
    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();
    }
});

Change this line in your other script block:

$("#elementSentence").val(getSelected());});}); </script>

to

$("#elementSentence").val(dialogApp.selection);

Tested successfully in Chrome and IE9. The fixes I applied are:

I replaced the getSelected function I had originally suggested with a much more effective function from this answer.

I used a namespacing technique to mitigate the global variables being put into in use on this page.

I cached the selected text immediately before displaying your context menu, in case displaying the menu were to change the browser's evaluation of what is currently selected.

user704808 - Thank You. Absolutely killer code. I will name my first child 'user704808'. That works perfectly in all five browsers. That took some real time for you to work through and I don't know how to thank you for your efforts. — AllThisOnAnACER, Jan 30 '13 at 14:45

How to Use jquery to paste cursor-highlighted text into a text input field

1 Answers1