如何防止使用 user-select: none 样式的文本被复制？答案

【问题标题】：How do I prevent text styled with user-select: none from being copied?如何防止使用 user-select: none 样式的文本被复制？
【发布时间】：2019-07-17 20:52:05
【问题描述】：

我已经构建了一个用于零售环境的库存管理应用程序。它显示买卖信息如下：

    Product Name
    Employee Name
    SKU
    Date

在一天结束时，员工会将任何购买/销售复制/粘贴到表单中。唯一需要的信息是产品名称，因此我将user-select: none 应用于其他信息。这确实会阻止选择文本，但会产生另一个问题。粘贴的文本以空白代替不可选择的文本出现。粘贴时是这样的：

    Product 1



    Product 2



    Product 3

我希望它在粘贴时看起来像这样：

    Product 1
    Product 2
    Product 3

有没有办法防止带有user-select: none 样式的行被复制？或者至少在粘贴剪贴板时去掉空白？

【问题讨论】：

如果您可以控制目标表单，您可以使用 JS 修剪空白，请使用 oninput 事件。
它应该可以工作。我无法重现您的问题：jsfiddle.net/5kwp70nm 这就是为什么您应该真正提供您的 HTML 代码，这样我们才能看到出了什么问题。
它对我来说也很好用（在那个小提琴中），但它可能是特定于浏览器的

标签： javascript css

【解决方案1】：

您可以通过将多行空格替换为一个换行符来实现。

let str = `    Product 1



    Product 2



    Product 3`.replace(/\n+/g, '\n'); // \n = new line

console.log(str);

或者您可以制作一个按钮来复制元素的文本，并仅复制需要复制的元素的值。这可以在将值放入文本区域并选择它之后使用document.execCommand('copy'); 完成。

【讨论】：