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

Question

我已经构建了一个在零售环境中使用的库存管理应用程序。 它显示购买/销售信息如下：

    Product Name
    Employee Name
    SKU
    Date

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

    Product 1



    Product 2



    Product 3

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

    Product 1
    Product 2
    Product 3

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

Answer 1

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

 let str = ` Product 1 Product 2 Product 3`.replace(/\\n+/g, '\\n'); // \\n = new line console.log(str);

或者你可以制作一个按钮来复制元素的文本，并且只复制需要复制的元素的值。 这可以通过document.execCommand('copy');来完成document.execCommand('copy'); 将值放入文本区域并选择它后。