如何在複製時排除部分文本

Question

我試圖讓一些文本不可複製，我的目標不是阻止人們複製我網站上的文本，而是讓文本更易於使用。我有一個文件大小的文件列表，但我只想複製文件名稱而不是文件大小。

到目前爲止，我嘗試了幾種不同的方法，但沒有工作，我已經設法使用CSS用戶選擇獲得文本不可選擇，但我仍然可以在選擇兩個或多個行時複製文件大小。

我只是試過用一個按鈕來防止複製，這沒有工作乙醚，任何想法？

<a href="http://10.10.10.1/links/file.doc"file.doc</a> 
<button type="button" disabled="disabled" id="filesize">6 MB</button><br \> 

目標瀏覽器是Mac上的Safari，所以在最新的Safari上運行的實驗性CSS3或HTML5命令是好的。

（感謝MVDS對提出的標題，和一個解決方案）

Answer 1

醜陋的黑客攻擊警報：創建2個版本的文字，一種帶有一個沒有大小，否則相同的，並把它們重疊divs，版本沒有大小有更高的z-index。

更好的解決方案，也許不是跨瀏覽器，是增加一個

<input type="text" value="(6 MB)" style="border:0; ..."> 

我建議重命名問題因爲目前的情況是，這聽起來像你「如何複製時排除文本部分」正在尋找平均無望的版權保護計劃，而這個問題相當有趣。

Answer 2

使用範圍（或任何文本容器真的）和unselectable屬性，像這樣：

<a href="http://10.10.10.1/links/file.doc">file.doc</a> 
<span unselectable="on">6 MB</span> 

這將無法正常工作一切，但因爲你有一個特定的瀏覽器的目標，這會工作得很好您的具體情況:)

能夠方便地支持一些更多的瀏覽器，而你在這，你可以扔掉一些CSS在那裏，首先定義一個這樣的課程：

.unselectable { 
    user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
} 

然後將其指定爲好，像這樣：

<a href="http://10.10.10.1/links/file.doc">file.doc</a> 
<span class="unselectable" unselectable="on">6 MB</span> 

Answer 3

一個相當hacky的方法，使這項工作是使用::before或::after僞元素插入您的文本使用css content:屬性。

HTML：

<a href="http://10.10.10.1/links/file.doc">file.doc</a> 
<button type="button" disabled="disabled" id="filesize"><i></i></button> 

CSS：

button i:before { 
content: '6 MB'; 
} 

優點：它的工作原理：選擇多行，即使它不會被複制到剪貼板。

缺點：僞元素需要特別注意CSS樣式，因爲它們被插入到普通文檔流之外。對多個元素使用content:屬性還需要自定義標記或內聯css。