1

ユーザーが選択範囲外で右クリックしたときに現在の選択範囲をコピーできるようにするにはどうすればよいですか?

ユーザーが HTML テーブル内のセルを選択できるようにするスクリプトを次に示します。選択したセルをタブ区切りの値に変換し、それを画面外のテキストエリアに配置するため、ユーザーが [編集] メニューの [コピー] をクリックするかCtrl-C、 を押すと、選択したセルをコピーして Google ドキュメントまたは別のスプレッドシートに貼り付けることができます。

しかし、多くのユーザーは、右クリックしてコンテキスト メニューの [コピー] を選択して、コピー アンド ペーストを行っていることがわかりました。しかし、彼らがテーブルを選択してこれを試すと、オフスクリーンテキストエリアの現在の選択が解除され、コンテキストメニューに「コピー」が表示されません-少なくとも最近のFirefoxとChromeでは:-(

ユーザーが右クリックしたときに現在の選択を選択したままにして、ネイティブ コンテキスト メニューに [コピー] を表示する方法はありますか?

Internet Explorer に関する関連する質問を 1 つ見つけましたが、その場合、ユーザーが選択範囲内であっても右クリックすると、現在の選択範囲が選択解除されるように聞こえます: Text deselected on right click in IE8

4

1 に答える 1

3

コンテキスト メニューはブラウザーによって管理され、コピー (切り取りと貼り付けと共に) コマンドを追加するかどうかを決定します。これは、ユーザー選択でコンテキスト メニューが開いている場合にのみ発生します。

イベントのリスナーを追加できcontextmenuます。これはキャンセルできるため、カスタム コンテキスト メニューを作成できます。これは非常に優れていますが、Flash などの高度な技術を使用しないとクリップボードにアクセスできません。

ただし、使用できる（汚い）トリックがあります。しかし、<textarea>とにかくトリックはトリックです。次のようにスタイルします。

textarea {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0 none;
    opacity: 0;
}

これで、イベントのイベント リスナーを追加できますcontextmenu。

var textarea = document.getElementsByTagName("TEXTAREA")[0];

document.addEventListener("contextmenu", function(e) {
    textarea.style.zIndex = 10000; // must be high enough
    textarea.style.left = e.pageX + "px";
    textarea.style.top = e.pageY + "px";
    textarea.setSelectionRange(0, textarea.value.length);
    setTimeout(function() {
        textarea.style.zIndex = -10000; // must be low enough
    }, 10);
});

ここで行うことは、テキストエリアをカーソルのすぐ下に配置し、そのコンテンツ全体を選択して、カーソルが実際に選択範囲にくるようにすることです。

textarea は他のすべての要素の上にある必要があるため、そのz-indexスタイル プロパティを高い値に設定する必要があります。ただし、ページに「ゴースト」が浮かんでいて、予想されるマウスの動作が妨げられる可能性があるため、他のすべての要素の背後にプッシュした直後に (したがってsetTimeout) 、

そこでは、コンテキスト メニューに作業用のコピーがあります。

申し訳ありませんが、Chrome でのみテストしました。私が推測する他のブラウザーでも動作するはずです。テストするだけで済みます。IE8 以下 (の代わりに使用し、テキストを選択する方法がまったく異なる - チェックアウト) では動作せず、IE8 では動作しません(イベントリスナーを設定すると常にコンテキストメニューが表示されなくなります - する必要があります)。イベントを使用し、右クリックをチェックします)。attachEventaddEventListenercontextmenumousedown

警告: ユーザーがクリックする場所によっては、テキスト領域がページの下部と右側の境界からはみ出し、ページ スクロールバーが表示される場合があります。テキストエリアのサイズを幅 1 ピクセル、高さ 1 ピクセルに変更し、overflow: hidden.

まあ、この答えは私自身にも非常に有益でした。気に入っていただけると幸いです。

編集：ライブテスト

于 2013-04-23T16:26:54.193 に答える