当右击选择区域外时，允许复制当前选择区域(相对于取消选择)

Allow copy current selection (vs. deselect) when right click outside the selection?

本文关键字：选择 区域 复制 相对于 取消 右击 许复制      更新时间：2023-09-26

如何允许用户在选择区域外右击时复制当前选择区域?

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

但是我发现很多用户都是通过右键单击并选择上下文菜单中的"复制"来复制粘贴的。但是，当他们选择表格并尝试这样做时，屏幕外文本区的当前选择被取消选中，并且"复制"不会出现在上下文菜单中-至少在最近的Firefox和Chrome中不会:

当用户右键单击时，是否有任何方法可以保持当前选择的选择，以便"复制"出现在本机上下文菜单中?

我发现了一个关于ie浏览器的相关问题，但在这种情况下，当用户右键单击时，即使是中的，当前选择也会被取消选中:在IE8中右键单击

文本也会被取消选中。

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

你可以为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和更低(使用attachEvent而不是addEventListener，并有一个完全不同的方式来选择文本-检查出来)，绝对不是在IE8(它总是阻止上下文菜单出现，如果你设置了contextmenu事件监听器-必须使用mousedown事件和检查右键)。

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

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

编辑: live test

相关文章：