Question

我的页面有一个<div>，它回显了从数据库中提供的书籍脚本。

用户应该找到一些文本，用光标突出显示它，然后右键单击以显示我从Andrew Whitaker，Stack / 4495626获得的自定义上下文菜单。

然后，用户应单击上下文菜单中的一个选项 <Idiom>Idiom</Idiom>，<Proverb>Proverb</Proverb>等将光标突出显示的文本插入文本字段id="element"。

User704808：我尝试了jsfiddle但它不会让上下文菜单在该窗格中工作，所以我已经用下面的整页代码进行了更新。前三个测试正确，因为它们是静态的;它是动态的getSelected（），我无法工作。再次感谢。

<!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>

Answer 1

编辑：为了简洁和清晰，取代了整个答案。

对您问题中的HTML文档进行以下更改：

将script中的两个head块替换为包含此块的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(); } });块：

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

在您的其他脚本块中更改此行：

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

到

{{1}}

在Chrome和IE9中成功测试过。我应用的修正是：

我用this answer中更有效的函数替换了我最初建议的getSelected函数。

我使用命名空间技术来缓解在此页面上使用的全局变量。

我在显示上下文菜单之前立即缓存了所选文本，以防显示菜单更改浏览器对当前所选内容的评估。

如何使用jquery将光标突出显示的文本粘贴到文本输入字段中

1 个答案: