如何防止部分HTML文本被复制时，复制相邻

How to prevent part of HTML text from being copied when copying adjacent?

本文关键字：复制 文本 何防止 HTML      更新时间：2023-09-26

我写了一个添加行号的JavaScript小部件，我不能弄清楚的一件事是在复制文本时防止数字被复制。我希望人们能够复制数字周围的序列，而不是数字本身。下面是脚本结果的一个示例:

基本上

: 

<span>useful stuff to be copied </span>
<span style="some-mysterious-setting: True;"> gloss to be discarded in selection </span>
<span> useful stuff to be copied</span>

数字是作为一个单独的span元素实现的，而不是作为一个表或任何花哨的东西。我在CSS中尝试了user-select: none;及其变体，但这意味着它不会突出显示，但它仍然复制编号。

所以你不需要Javascript。

解决方案是使用伪元素，而不是在元素中实际放置数字。

<span class="line-number" data-line-number="1"></span>
CSS: 

.line-number::before {
  content: attr(data-line-number);
}


td:nth-of-type(1) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
td:nth-of-type(1)::before {
  content: attr(data-line-number);
}
<table>
  <tr>
    <td data-line-number="1"></td>
    <td>Test row</td>
  </tr>
  <tr>
    <td data-line-number="2"></td>
    <td>Test row</td>
  </tr>
  <tr>
    <td data-line-number="3"></td>
    <td>Test row</td>
  </tr>
  <tr>
    <td data-line-number="4"></td>
    <td>Test row</td>
  </tr>
</table>

你也可以使用CSS counter来得到你想要的结果，如果你有大量的数据，你不再需要指定行号

CSS 

table
{
    counter-reset: line;
    counter-increment: line;
}
td:nth-of-type(1)::before {
  counter-increment: line+10;
  content: counter(line) " ";
}
td:nth-of-type(1)
{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
HTML 

<table>
  <tr>
    <td></td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td></td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td></td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td></td>
    <td>Row 4</td>
  </tr>
</table>

我想这应该可以工作:

Javascript: 

var elem = document.getElementsByClassName("myElement");
elem.unselectable = "on";
Html: 

<span>useful stuff to be copied </span>
<span class="myElement"> gloss to be discarded in selection </span>
<span> useful stuff to be copied</span>
相关文章：