防止将特定的用户控件元素放置在复制粘贴剪贴板上

Question

我的网站上有一些数据，其中包含“隐藏”复选框。我网站上的用户经常复制和粘贴表格数据，但是当他们复制并粘贴到Excel中时，通常会同时复制复选框。如何防止复选框被复制到剪贴板？

请注意：我不不想阻止用户复制和粘贴，只是我不希望单个元素不会放在剪贴板上。

下面是用户当前何时复制并粘贴到Excel中的示例（请注意不需要的复选框）：

该复选框的CSS当前如下所示：

input {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        user-select: none;
}

<table>
  <tbody>
<tr>
  <td>Test</td>
  <td><input type="checkbox" /></td>
  <td>Test 2</td>
</tr>
<tr>
  <td>Test</td>
  <td><input type="checkbox" /></td>
  <td>Test 2</td>
</tr>
<tr>
  <td>Test</td>
  <td><input type="checkbox" /></td>
  <td>Test 2</td>
</tr>
  </tbody>
</table>

如果将代码段中显示的内容复制并粘贴到Excel中，则输出如下所示：

Answer 1

您可以通过在CSS文件中将user-select设置为none来实现。

.no-select {
  user-select: none;
}

<p>Try to select me</p>
<p class='no-select'>Try to select me as well</p>

因此您的复选框应如下所示：

        .field-name input {
            /* make the checkbox "hidden" but still focusable ('visibility: hidden'/'diplay: none' would not work here) */
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            
            user-select: none;
        }