如何防止在复制相邻文本时同时复制 HTML 文本的一部分？

Question

如何防止在复制相邻文本时同时复制 HTML 文本的一部分？

3

我写了一个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; 及其变体，但这意味着它不会被突出显示，但仍然会复制编号。

- Matteo Ferla

你是按照示例中的精确方式输出，还是像典型的编辑器一样？例如每行都有一个数字？ - Cagatay Ulubay

哦，这实际上是你的代码。 - Cagatay Ulubay

我在GitHub文件上进行了更改。感谢大家！ - Matteo Ferla

3个回答

1

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

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>

- Jaay

抱歉，在选择答案之前我没有看到这个答案。但我一定会研究一下Counter，因为它可能在这里很有用。谢谢。 - Matteo Ferla

1

它非常适用于大多数情况，但我认为没有办法使它成为4位数字，以便它以“0011”开头而不是“11”。 - Alejalapeno

@Alejalapeno，使用计数器无法完成此操作，您的答案更适合该情况。 - Jaay

0

我猜这应该可以工作：

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>

- Harsh Makani

问题在于，如果你在文字前面和后面都有文字，并进行复制操作，你仍然会在剪贴板中得到中间那部分无法选择的文本。 - Cagatay Ulubay

是的，我检查过了。不幸的是，它对于被分割的文本无效，但对整个文本有效！ - Harsh Makani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alejalapeno · Accepted Answer

所以这并不需要使用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>