Question

我写了一个JavaScript widget，它添加了行号，而我无法弄清楚的一件事就是在复制文本时阻止复制数字。我希望人们能够复制数字周围的序列，而不是数字。 Here is an example of the script's results

基本上：

<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元素实现的，而不是作为表或任何花哨的东西。我尝试了user-select: none;及其在CSS中的变体，但这意味着它没有突出显示，但它复制了编号。

Answer 1

所以你不需要Javascript。

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

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

CSS：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您也可以使用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>

Answer 3

我想这应该有效：

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>

复制邻近时如何防止部分HTML文本被复制？

3 个答案: