Question

如何在用户右键单击所选内容时允许用户复制当前选择？

Here is a script，允许用户在HTML表格中选择单元格。它将选定的单元格转换为制表符分隔值并将其放在屏幕外的文本区域中，因此当用户在“编辑”菜单中单击“复制”或按 Ctrl-C 时，它们可以复制并粘贴选定的单元格细胞到Google文档或其他电子表格。

但我发现许多用户通过右键单击并在上下文菜单中选择“复制”来复制和粘贴。但是当他们选择一个表并尝试这个时，取消选择屏幕外文本区域中的当前选择，并且“复制”不会出现在上下文菜单中 - 至少在最近的Firefox和Chrome中不会出现： - （

当用户右键单击时，是否有任何方法可以保持当前选择，因此“复制”会出现在原生上下文菜单中？

我发现了一个关于Internet Explorer的相关问题，但在这种情况下，当用户右键单击内部选择时，取消选择当前选择：Text deselected on right click in IE8

Answer 1

上下文菜单由浏览器管理，浏览器决定是否在其中添加复制（以及剪切和粘贴）命令。在用户选择上打开上下文菜单时，它可能只发生。

您可以为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放在光标正下方并选择它的全部内容，这样光标实际上就在选择上。

textarea必须位于所有其他元素之上，因此您必须将其z-index样式属性设置为较高的值。但是你不会想要在你的页面上浮动“幽灵”，这可能会阻止预期的鼠标行为，所以你在你将其推到所有其他元素之后立即（因此setTimeout）。

在那里，你在上下文菜单上有一个工作副本。

我只在Chrome上测试过，抱歉。我想，应该在其他浏览器上工作，你只需要测试。将不在IE8及更低版本上工作（使用attachEvent而不是addEventListener，并且选择文本的方式完全不同 - 检查出来）并且绝对不会在IE8中（如果您设置了contextmenu事件侦听器，则始终会阻止显示上下文菜单 - 必须使用mousedown事件并检查是否有正确的点击次数。

警告：根据用户点击的位置，textarea可能会超出底部和右侧页边界，从而导致页面滚动条出现。您可以尝试将textarea的大小调整为1px宽和高，并设置overflow: hidden。

嗯，这个答案也为我自己提供了很多信息。希望你会喜欢它。

修改：live test

在选择之外右键单击时，是否允许复制当前选择（与取消选择相对应）？

1 个答案: