WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:マウスの右クリック制御

0:[投稿] ミキ [2002/12/03 13:51 ][環境:WIN+IE JSP]

こんにちは。Jspの中にJavaScriptを組み込んで、マウスが右クリックされたらオリジナルのメニューを表示したいのですが、どのようにすればよいか教えて下さい。


1:[回答] のぐりん [MAIL] [2002/12/03 16:27 ]

onContextMenu をヒントに調べてみてください。


2:[回答] ミキ [2002/12/03 17:26 ]

ありがとうございます。
onContextMenuで調べて試してみます。


3:[回答] ひじ [2002/12/03 20:03 ]

http://www.parkcity.ne.jp/~chaichan/qanda/qa3426.htm
は読まれたのでしょうか。

あと、解決したのであれば、どのようにして解決したのか、ここに投稿して下さい(自分で解決したにしても、他人のやり方で解決したとしても、同様に)。
後で同様な投稿があったときに役にたちます。


4:[回答] ミキ [2002/12/04 08:47 ]

onContextMenuで調べてみたところ下記のコードにより解決できました。
アドバイスをして頂きましてありがとうございました。

<html>
<head>
<style>
.menuItem {
  font-family:sans-serif; font-size:12pt;
  width:220;padding-left:20;
  background-color:menu;
  color:black
}
.highlightItem {
  font-family:sans-serif; font-size:12pt;
  width:220; padding-left:20;
  background-Color:highlight; color:white;
}
</style>
</head>
<body oncontextmenu="showMenu(); return false">
<h2>Right Click to Bring Up a Context Menu</h2>
<!-- Context Menu -->
<div id=menu1
 onclick="clickMenu()"
 onmouseover="toggleMenu()"
 onmouseout="toggleMenu()"
 style="position:absolute;
        display:none;
        border: 2px outset black;
        width:220;
        background-color:menu">
<div class="menuItem"
 doFunction="alert(el.innerHTML);">Graph</div>
<hr>
<div class="menuItem"
 doFunction="alert(el.innerHTML);">
 Show News
</div>
<div class="menuItem"
 doFunction="alert(el.innerHTML);">Buy
</div>
<hr>
<div class="menuItem"
 doFunction="alert(el.innerHTML);">Sell
</div>
<div class="menuItem"
 doFunction="alert(el.innerHTML);">
 Refresh Portfolio
</div>
</div>
<!-- End of Context Menu -->
<script>
var el;
function showMenu() {
  ContextElement=event.srcElement;
  menu1.style.leftPos+=10;
  menu1.style.posLeft=event.clientX;
  menu1.style.posTop=event.clientY;
  menu1.style.display="";
  menu1.setCapture();
}
function toggleMenu() {
  el=event.srcElement;
  if (el.className=="menuItem") {
     el.className="highlightItem";
  } else if (el.className=="highlightItem") {
     el.className="menuItem";
  }
}
function clickMenu() {
  menu1.releaseCapture();
  menu1.style.display="none";
  el=event.srcElement;
  if (el.doFunction != null) {
    eval(el.doFunction);
  }
}
</script>
</body>
</html>


5:[質問] ミキ [2002/12/04 09:27 ]

もう一つ質問したいことがあります。
ブラウザの入力フィールドに入力された文字の一部をマウスの左クリックで選択して、右クリックを押すと表示されるコンテキストメニューからある文字が選択されたら、ブラウザの入力フィールドから選択した値を取得したいのですがJavaScriptでどのようにすれば
宜しいでしょうか?


6:[回答] ちゃいぱ [2002/12/04 09:58 ]

>マウスの左クリックで選択
ときたら、クリップボードですね。
以下が参考になるかも。
http://www.parkcity.ne.jp/~chaichan/qanda/qa3172.htm


7:[質問] ミキ [2002/12/04 12:04 ]

上記のURLを参照しましたら、確かにクリップボードに貼りついて、それを読み込むことはできますが、clipboardData.setData("text","クリップボード張り付データ")の"クリップボード張り付データ"の部分をマウスの左クリックで選択した値にするには、どうすれば宜しいでしょうか?


8:[回答] ひじ [2002/12/04 12:07 ]

何回同じことを書かせる気ですか?
http://www.parkcity.ne.jp/~chaichan/qanda/qa3426.htm


9:[回答] ミキ [2002/12/04 12:54 ]

URLだけ教えてもらっても漠然としていてわかりません。
もう少し具体的に教えて下さい。


10:[回答] ミキ [2002/12/04 12:57 ]

URLだけ教えてもらっても漠然としていてわかりません。
もう少しサンプルコード等を用いて具体的に教えて下さい。


11:[回答] gun [2002/12/04 13:54 ]

何をやりたくて、現在どこまでできているのか、
いまいいちよく判りませんが、とりあえず、

選択されている文字列を得る方法(とほほWWW入門)
http://tohoho.wakusei.ne.jp/js/document.htm#Other


12:[質問] ミキ [2002/12/04 16:02 ]

おかげさまで下記のコードにより選択されている文字列は取得できました。

var xx = document.selection.createRange();
alert(xx.text);

ただ、ここで入力フィールドから選択した値(xx)を下記のようにクリップボードにセットしても設定されません。

clipboardData.setData(text,xx)

どのようにすればクリップボードに入力フィールドから選択した値が設定されるでしょうか?


13:[回答] gun [2002/12/04 16:33 ]

ここで、xxは
選択した文字列そのものではなく、
選択されている文字列を示すオブジェクトです。

ご自分でも書いてらっしゃるように、
    clipboardData.setData("text","クリップボード張り付データ")
ですから、
    clipboardData.setData("text",xx.text);
でしょう。


14:[回答] ちゃいぱ [2002/12/04 17:15 ]

この際、クリップボードは忘れましょう。
クリップボードを使うより、createRange()の方が、よいと思います。

<div class="menuItem"
doFunction="alert(el.innerHTML);">Graph</div>

<div class="menuItem"
doFunction="alert(document.selection.createRange().text);">Graph</div>

な感じでどうですか?


15:[回答] ミキ [2002/12/04 17:59 ]

ご指導ありがとうございます。
申し訳ございませんが、今日はもう終了させて頂きます。
明日試してみます。


16:[回答] AM [URL] [2002/12/04 23:24 ]

ブラウザ標準のメニューではない独自のメニューを出すのは、
ユーザビリティを低下させ、閲覧者を混乱させる原因になりま
す。閲覧者は、マウスの右ボタンをクリックするとコンテキス
トメニューが出ると予期しています。
標準でないメニューを用意しているサイトは、そのために閲覧
者から嫌われる可能性があります。注意が必要です。


17:[質問] ミキ [2002/12/05 09:42 ]

AMさん、ご忠告ありがとうございます。
gunさん、おかげさまでクリップボードに入力フィールドから選択した値を設定することができました。
そこで素朴な疑問なのですが、JavaScriptで設定した変数の値をJspから参照したいのですが、そのようなことは可能でしょうか?


18:[回答] ふじ [URL] [2002/12/05 16:01 ]

> JavaScriptで設定した変数の値をJspから参照したいのですが、そのようなことは可能でしょうか?
このような疑問が出るのは、おそらく Web アプリケーションがどのような
仕組みで動いているかの理解が足りないためだと思います。
# ミキさんの他の質問からも、そのような印象を受けます。
# http://www.parkcity.ne.jp/~chaichan/qanda/qa3412.htm とか。

JavaScript はどこで動くのか。JSPはどこで動くのか。
ブラウザとサーバ側のプロセスは、どのように通信しているのか。
HTTPというプロトコルについて。など、Webアプリケーションの構造を理解すれば
>>17 のような疑問は解決するはずです。
# どうもお仕事でやられているようなので、おせっかい。違ったらすみません。


19:[質問] ミキ [2002/12/05 16:45 ]

やりたいことを整理してみます。

@右クリックが押されたらオリジナルのコンテキストメニューを表示し、入力フィールドから選択した値を取得する。
A右クリックで表示されたコンテキストメニューからある文字列を選択し、選択した値を取得する。

以上2点については、JavaScriptで実現できました。

B入力フィールドから選択した値をコンテキストメニューから選択した値でタグ付けしてXMLファイルとして登録したい。

例えば、ある入力フィールドに"あいうえお"と入力し、"う"を選択して右クリックで表示されるコンテキストメニューからある文字列("item")を選択した場合は、下記のように編集したいのですが。

<test>
 <A>あい</A>
 <A 項目属性="item">う</A>
 <A>えお</A>
</test>

現在、Jspの中にJavaScriptを組み込んで開発していますがBについては、まだ実現できていません。
どなたか一緒に考えて頂けないでしょうか。
宜しくお願い致します。



20:[回答] gun [2002/12/05 19:21 ]

"あいうえおう"と入力された入力フィールドから、"う"を選択された場合
のことを考えると、(3)の実現は難しそうですね。

ブラウザ表示後にJSPへデータを送る方法は、
http://www.parkcity.ne.jp/~chaichan/qanda/qa3433.htm
と、似たつくりにできるのではないかと。


21:[質問] ミキ [2002/12/05 19:46 ]

>>18:ふじさんがおっしゃるとおり、私はWebアプリケーションがどのような仕組みで動いているかの理解が足りませんでした。
JavaScriptは、WEBサーバ上でも実行できると誤解していました。
申し訳ございませんでした。
上の質問@、AのJavaScriptで実現できたことをWEBサーバサイドのスクリプト(Jsp)で実現したいのですが可能でしょうか?
上の質問Bについてもご指導宜しくお願いします。


22:[回答] ひじ [2002/12/05 23:04 ]

# 全然人の話を聞いてくれない。どうすればいいんですか。

クライアント側からサーバにデータを送るには、
http://www.parkcity.ne.jp/~chaichan/qanda/qa3433.htm#r11
にあるように、
1. フォームで送る方法
2. URLにデータを含めて渡す方法
のどちらかを使うことになります。

今回(選択した部分の内容をサーバに送る)場合は、1の方法をとるのが良いかと思います。隠しフィールドに選択部分のテキストをセットし、submitでサーバに送ります。


23:[回答] gun [2002/12/06 11:48 ]

> 上の質問(1)、(2)のJavaScriptで実現できたことをWEBサーバサイド
> のスクリプト(Jsp)で実現したいのですが可能でしょうか?

ご自分でも仰っている通り、JSPはサーバ上で動作するわけですから
ブラウザ上の動作はJAVAスクリプトやVBスクリプトを用いて、
つくらねばなりません。
この場合、JSPで実現できるのは、JAVAスクリプトやVBスクリプトを
含んだページを出力することくらいです。
つまり、
> JavaScriptは、WEBサーバ上でも実行できると誤解していました。
> 申し訳ございませんでした。
これと似たような誤解です。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World