Предотвращение помещения определенного элемента управления пользователя в буфер обмена

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

Этого можно добиться, установив user-select в none в своем файле CSS.

.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;
        }