JS/CSS/XHTML：不要在複製事件期間複製特定文本

Question

我正在尋找一種方法來禁用在使用Ctrl + C等時複製特定區域的文本。是否必須編寫文字以不同的方式。

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

上面是什麼這是。這是我一直在研究的語法高亮顯示器（到目前爲止支持3種語言）。當用戶以任何方式選擇任何文本時，我不希望行號被複制。

我想不出一種方法來顯示行號，沒有他們真正在那裏。

Answer 1

只要行號和源代碼混合在一起，即使不是不可能的話，編程上也很難防止。

理想的方法是將源代碼放在它自己的實際容器中。

打開一個文檔檢查器，並期待在Github上如何做到這一點，例如：https://github.com/jbrisbin/riak-exchange/blob/master/Makefile

它們具有包含行號的單獨<pre>元件，以及含有該代碼<table>細胞。 （我想選擇一個原因是他們在這裏使用表，但我不知道肯定）

Answer 2

設置user-select,-moz-user-select和-webkit-user-select到none可能工作。對於IE，您需要處理onselectstart並返回false。

這會阻止人們選擇文本，但我不知道當您嘗試複製其他文本時會發生什麼情況。

Answer 3

這給一個嘗試...

演示：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 4

我知道這個問題已經三年了，但是使用HTML5，您可以將行號存儲在數據屬性中，並使用CSS2來顯示文本。這應該防止行號被複制。

HTML

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

CSS

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