1

当用户在选择之外右键单击时，如何允许用户复制当前选择？

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

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

当用户右键单击时，有什么方法可以保持当前选择被选中，因此“复制”出现在本机上下文菜单中？

我发现了一个有关 Internet Explorer 的相关问题，但在这种情况下，即使用户在选择范围内单击鼠标右键，也会取消选择当前选择：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 放在光标正下方并选择其全部内容，以便光标实际上位于所选内容上。

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

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

我只在 Chrome 上测试过，抱歉。我猜应该可以在其他浏览器上工作，你只需要测试。不适用于 IE8 及更低版本（使用而不是，并且有完全不同的方式来选择文本 - 检查出来），绝对不能在 IE8 中工作（如果您设置事件侦听器，它总是会阻止上下文菜单出现 - 必须使用事件并检查右键单击）。attachEventaddEventListenercontextmenumousedown

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

好吧，这个答案对我自己也很有帮助。希望你会喜欢它。

编辑：现场测试

于 2013-04-23T16:26:54.193 回答