JS/CSS/XHTML：在复制事件期间不要复制特定文本

Question

我正在寻找一种方法，当您使用 Ctrl + C 等时禁用特定文本区域的复制。无论我是否必须以不同的方式编写文本。

http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png

以上是它的用途。这是我一直在开发的语法荧光笔（到目前为止支持 3 种语言）。当用户以任何方式选择任何文本时，我不希望复制行号。

我想不出一种方法来显示行号，而它们实际上并不存在。

Answer 1

只要行号和源代码混合在一起，就很难以编程方式阻止（如果不是不可能的话）。

理想的方法是将源代码放在自己的实际容器中。

打开文档检查器并查看 Github 是如何做到的，例如： https:// github.com/jbrisbin/riak-exchange/blob/master/Makefile

他们有一个单独的

 元素，其中包含行号和一个包含代码的  单元格。 （我认为选择是他们在这里使用表格的原因，但我不确定。）

Answer 2

尝试一下...

演示：http://jsfiddle.net/wdm954/UD8Dq/7

我对 div 进行了分层，因此代码 div 位于顶部，数字位于后面。当您复制并粘贴时，您应该只获得代码。

.lines {
    position: absolute;
    width: 80%;
    color: #666;
}
.lines pre:nth-child(odd) {
    background-color: #EEE;
}
.code {
    position: absolute;
    z-index: 2;
    padding-left: 5%;
    width: 80%;
}


<div class="box">
    <div class="lines">
        <pre>1</pre>
        <pre>2</pre>
        <pre>3</pre>
        <pre>4</pre>
    </div>
    <div class="code">
<pre>
    code
    code
    code
    code
</pre>
    </div>
</div>

Answer 3

将 user-select、-moz-user-select 和 -webkit-user-select 设置为 none 可能会工作。对于 IE，您需要处理 onselectstart 并返回 false。

这将阻止人们选择该文本，但我不知道当它位于您尝试复制的其他文本旁边时会发生什么。

Answer 4

我知道这个问题已经有三年了，但是使用 HTML5，您可以将行号存储在数据属性中，并使用 CSS2 来显示文本。这应该可以防止行号被复制。

HTML

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

CSS

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