I wrote a JavaScript widget which adds line numbers and one thing I cannot figure out is preventing the numbers from being copied when one copies the text. I want people to be able to copy the sequences around the numbers, but not the numbers. Here is an example of the script's results.
Basically:
<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>
The numbers are implemented as a separate span elements and not as a table or anything that fancy. I tried user-select: none; and its variants in CSS, but that means it does not get highlighted, but it copies nevertheless the numbering.
So you don't need Javascript for this.
The solution is to use a pseudo element and not actually put the number in your element.
<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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments