1

私のページには、<div>データベースから供給された本のスクリプトをエコーする があります。

ユーザーは、テキストを見つけてカーソルで強調表示し、右クリックして、Andrew Whitaker (Stack/4495626) から入手したカスタム コンテキスト メニューを表示する必要があります。

<Idiom>Idiom</Idiom>ユーザーは、コンテキスト メニューなどのオプションの 1 つをクリックして <Proverb>Proverb</Proverb>、カーソルで強調表示されたテキストをテキスト フィールドに挿入する必要がありますid="element"。

User704808: jsfiddle を試してみましたが、そのペインでコンテキスト メニューが機能しないため、以下のコードのページ全体を更新しました。最初の 3 つは静的であるため、正しくテストされます。私が動作させることができないのは、動的な 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>
4

1 に答える 1

3

編集：簡潔さと明確さのために回答全体を置き換えました。

質問の HTML ドキュメントに次の変更を加えます。

scriptの 2 つのブロックを、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);

Chrome と IE9 で正常にテストされました。私が適用した修正は次のとおりです。

最初に提案した getSelected 関数を、この回答のより効果的な関数に置き換えました。

このページで使用されているグローバル変数を軽減するために、名前空間の手法を使用しました。

メニューを表示すると、現在選択されているもののブラウザの評価が変更される場合に備えて、コンテキスト メニューを表示する直前に、選択したテキストをキャッシュしました。

于 2013-01-28T19:34:31.357 に答える