禁用文本选择但允许剪切、复制和粘贴

Question

这是用于允许您选择、剪切、复制、粘贴和拖放以重新排列列表项的列表组件。 问题在于 Chrome 中的user-select: none似乎禁用了剪切、复制和粘贴事件，即使它应用于子项而不是父项。

我创建了以下重现问题的 JSFiddle： https ://jsfiddle.net/c1n4vv7j/10/

<div tabindex="0" oncut="alert('hello')">
    <li>Click Here and Hit CTRL+X</li>
    <li>Works in Firefox and Edge but not Chrome!</li>
</div>

如果您按照说明进行操作，您应该会在 Firefox 和 Edge 中看到一个弹出窗口，但在 Chrome 61 中不会看到。目前我发现的唯一解决方法是在顶部创建一个 <li> 高度为 1px 并让 onclick 事件选择它，那么 <ul> 仍然可以继续接收剪贴板事件。 这种解决方案是不可取的，也不允许选择元素上的文本。

我开始确信这实际上可能是 Chrome 中的一个错误，并且它不符合 HTML5 剪贴板规范，该规范表示即使没有选择任何内容，事件仍应触发，只是有一个焦点节点。

任何人都知道一个很好的解决方法，或者我应该向 Chrome 报告这个问题吗？

编辑：

如果您更改剪切处理程序以向我们显示 activeElement，它将报告 div，而事件目标报告正文：

$("*").on("cut", function(event){
  console.log(event.target);
  console.log(document.activeElement);
});

Answer 1

不要使用用户选择：无。

我希望这对你有帮助

div > li{
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}

div > li::selection {
    background: rgba(0,0,0,0); //you can use transparent also
}

用于火狐

div > li::selection {
    background: rgba(0,0,0,0); //you can use transparent also
}

Answer 2

事件被触发，只是不在您期望的节点上。 该事件在<body>上触发，而不是在您的<div>上触发： https : //jsfiddle.net/DerekL/c1n4vv7j/12/

该规范确实指出：

要触发类型 e 的剪贴板事件，

让 clear-was- called 为假

让 type-to-clear 为空列表

让 clipboard-entry 为当前剪贴板内容的序列号，如果操作系统剪贴板不支持序列号，则为 null

如果事件是由用户代理生成的，则置信为真，否则为假

设定目标如下：

如果上下文可编辑：

让 target 是包含按文档顺序选择的开始的元素，或者如果没有选择或光标，则为 body 元素。

否则，如果上下文不可编辑

让 target 成为焦点节点，或者如果没有节点具有焦点，则为 body 元素。

我认为这是一个“错误”，因为节点确实收到了focus事件而不是cut事件，但请记住， user-select属性仍然是草稿而不是标准。

Answer 3

在我的情况下，我需要在表格单元格中添加自定义选择行为，保持复制和粘贴的能力。 由于使用user-select: none在 Firefox 中产生错误行为，因此我使用selection伪元素解决了问题，删除了默认文本选择：

    table td::selection {
      background: none;
    }

禁用文本选择但允许剪切、复制和粘贴

问题描述

3 个解决方案

解决方案1
2 2017-08-11 05:12:56

解决方案2
1 2017-08-11 05:22:24

解决方案3
0 2020-12-06 14:05:33

禁用文本选择但允许剪切、复制和粘贴

问题描述

3 个解决方案

解决方案1 2 2017-08-11 05:12:56

解决方案2 1 2017-08-11 05:22:24

解决方案3 0 2020-12-06 14:05:33

解决方案1
2 2017-08-11 05:12:56

解决方案2
1 2017-08-11 05:22:24

解决方案3
0 2020-12-06 14:05:33