2009-08-06 8 views
7

JavaScript(JavaScript、IE、Firefox、Safariなど)のコンテキストメニューを起動する必要があります。私が解決しようとしている問題は、オーバーレイされた要素が右クリックされたとき、その下の要素にコンテキストメニューが表示されることです。上の要素がラベルの場合、右クリックすると、下のinput要素のコンテキストメニューが表示されます。要素のブラウザコンテキストメニューをどのようにトリガーしますか? (ユーザーが右クリックしたように)

ラベルのコンテキストメニューを表示する方法を知っていますが、コンテキストメニューを任意に開く方法はわかりません。

ご協力いただきましてありがとうございます。

+0

私があなたのところにいた場合、私はこの方法でハックしようとはしませんでした。おそらく、なぜ入力ボックスのコンテキストメニューがラベルの代わりに表示されているのか理解したいと思うでしょう。詳細をお知らせください。 –

+0

申し訳ありません、質問を読んだ後に削除しました。 –

+0

ここで私のプラグインを見ることができます:http:// fuelyourcoding。com/scripts/infield /に移動して、テキストフィールドの「内容」を右クリックしてみてください。ブラウザのコンテキストメニューを起動できない場合、このプラグインの使用はいくらか制限されます。 –

答えて

13

残念なニュースの持ち主になるのは申し訳ありませんが、これはJavascriptでは不可能です。

+0

私はこれが答えではないと考えていました。ちょっとだけ長い間開いたままにするつもり。 :) –

+0

はい、私はあなたの場合はそれを開いたままにします。 –

2

あなたは自分の質問:)

に答えので、私はあなたを失望させたくない、非常に反して、特に私は、ブラウザのcontectメニューは、ウェブページ上で通常のスクリプト経由でアクセス可能であるとは思いません。

あなたが求めているものが実際に実行可能だった場合、ブラウザメーカーはおそらくこれをバグとみなし、この動作を削除します。クロスブラウザでは、この動作は今日利用可能なことはほとんどありません。

マウスイベントをキャプチャしないで、コンテキストメニューを表示したい要素の下の領域にマウスが直接移動すると、下のカバー要素を押します。

これは私が考えている可能性の1つで、基本的にマウスの位置に応じて隠れ要素を公開/公開します。オーバーレイに穴を開けるように。

または、テキストフィールドを透明にして、オーバーレイをテキストフィールドの下に完全に配置しないのはなぜですか?

これは技術的にはうまくいかない場合は、少なくとも、対象のブラウザに対してバグや機能強化を提出する点があります。

ところで、ユーザーがキャレットの位置を直接右クリックするとコンテキストメニューが実際に動作するように見えるので、これは考慮すべきもう1つの抜け穴かもしれません。

+0

非常に良い考え。私は新しいリリースでは、この問題を解決するため、入力要素の下に*ラベルを表示するためのサポートを追加するつもりだと思います。ラッピング要素がinput要素またはtextareaの背景色を提供する必要があることを意味します。しかし、動作する必要があります! –

0

私はあなたのニーズに合った解決策があります。まだ完璧ではありませんが、いくつかのブラウザ(Fox 3.6、IE7、IE8、Chrome 4、Safari 3 xp)でいくつかの簡単なテストを行っただけです。基本的には、右クリックマウスのラベルを削除し、目的のフィールドがmouseupイベントでヒットするようにして、関連するフィールドのコンテキストメニューを起動します。

// Remove the contextmenu from "In-Field" Labels 
base.$label.bind("contextmenu",function(e){ 
    return false; 
}); 

// Detect right click on "In-Field" label: 
// hide label on mousedown so mouseup will target the field underneath. 
base.$label.mousedown(function(e){   
    if (e.which == 3){ 
     var elLbl = $(this); 
     elLbl.hide(); 
     var elFid = $(this).attr("for"); 
     // bind blur event to replace the label when we are done. 
     $("#" + elFid).bind("blur.infieldlabel",function(){      
      elLbl.show(); 
      $("#" + elFid).unbind("blur.infieldlabel");      
     });    
     return false; 
    } 
}); 

IEとSafariブラウザは、あなたが二回、ラベルの前にあるとアウト]をクリックする必要がある奇妙な問題が再び(私が考えるイベントタイミングとは何か)が表示されますが発生します。あなたは、コードを見ることによって、なぜこれが起こっているのかを簡単に知ることができます。また、フィールドに貼り付けた後にキツネの時々、わずかな不具合に気付きました。これは、コードにこのメソッドを組み込むことを決定した場合には、かなり簡単に修正する必要があります。

関連する問題