[Web前端]CSS实现“不可选择，不可复制”面临的问题
问题背景
在博客园代码高亮中，如果显示了行号，读者在复制代码时会将行号一起复制出来，要删除这些行号，代码才可用。
为了解决这个麻烦，我们开始采用的方法是在高亮代码下面提供一个“复制代码”链接，点击这个链接时，通过js代码删除行号。
这个方法欠缺之处：1. 读者不一定注意到“复制代码”链接；2. 多了一次点击操作。
解决思路
读者复制代码的通常操作是鼠标拖拉选择代码内容，然后Ctrl+C进行复制。增加任何鼠标与键盘的操作，都不是好的解决方法。
我们想到的最简单的解决方法就是通过CSS来实现。
实现过程
主要参考内容：css rule to disable text selection highlighting
测试浏览器：Firefox, Chrome, IE9
HTML测试代码：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Code LineNumber Copy Test</title> <style type="text/css"> .cnblogs_code{ background-color: #F5F5F5; font-family:Courier New; font-size: 12px; border: 1px solid #CCCCCC; padding: 5px; overflow: auto; } .codeLineNumber{ color: #008080; } </style> </head> <body> <div class="cnblogs_code"> <pre><span class="codeLineNumber">1</span> #include<iostream> <span class="codeLineNumber">2</span> #include<cmath> <span class="codeLineNumber">3</span> #include<cstring> <span class="codeLineNumber">4</span> #include<vector> <span class="codeLineNumber">5</span> #include<cstdio> </pre> </div> </body> </html>
浏览器中的显示效果：
1. Firefox中的实现
1.1 css代码：
.codeLineNumber{ -moz-user-select: none; /* for Firefox */ }
1.2 选择效果：
注：除了行号1，其他行号都被选中了。
1.3 复制/粘贴效果：
#include<iostream> #include<cmath> #include<cstring> #include<vector> #include<cstdio>
很棒！行号没有出现。在Firefox中通过css可以有效解决这个问题。唯一不足之就是选择时，除了第一个行号，其他行号都处于选中，违背了“所见即所得”。
2. Chrome中的实现
2.1 css代码：
.codeLineNumber{ -webkit-user-select: none; /* for Chrome */ }
2.2 选择效果：
注：选择效果不错！行号没有被选中，Firefox要是能有这样的效果就完美了。
2.3 复制/粘贴效果：
#include<iostream> 2 #include<cmath> 3 #include<cstring> 4 #include<vector> 5 #include<cstdio>
郁闷！号称程序员最喜欢的浏览器，竟然不能实现“不可复制”。除了第一个行号，其他行号依然会被复制。
在Google官方论坛中有人反馈了Chrome的这个问题：Issue 106180 in chromium: -webkit-user-select: none; triggers text-selection of adjacent node，但无人理睬。
3. IE9中的实现
IE9无法通过css实现，既不支持-ms-user-select: none;也不支持user-select: none;
目前只找到一种方法，给不可选元素加上属性：unselectable="on"。
3.1 HTML代码如下：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Code LineNumber Copy Test</title> <style type="text/css"> .cnblogs_code{ background-color: #F5F5F5; font-family:Courier New; font-size: 12px; border: 1px solid #CCCCCC; padding: 5px; overflow: auto; } .codeLineNumber{ color: #008080; } </style> </head> <body> <div class="cnblogs_code"> <pre><span class="codeLineNumber" unselectable="on"> 1</span> #include<iostream> <span class="codeLineNumber" unselectable="on"> 2</span> #include<cmath> <span class="codeLineNumber" unselectable="on"> 3</span> #include<cstring> <span class="codeLineNumber" unselectable="on"> 4</span> #include<vector> <span class="codeLineNumber" unselectable="on"> 5</span> #include<cstdio> </pre> </div> </body> </html>
3.2 选择效果：
3.3 复制/粘贴效果：
#include<iostream> 2 #include<cmath> 3 #include<cstring> 4 #include<vector> 5 #include<cstdio>
继续郁闷！IE9也无法实现“不可复制”。
小结
对于“不可选择(unselectable)”，三种浏览器虽然实现方法不一，但都能实现；
对于“不可复制(uncopyable)”，Firefox独领风骚！-webkit-user-select: none; 一招致胜。Chrome与IE9只能另辟蹊径（目前还没辟出来）。
美丽的Web世界，令无数程序员竟折腰；可是残酷的现实是，美丽不美丽不是Web标准说了算，而是浏览器说了算。就像你喜欢一个美丽的女孩，可是你们能不能在一起不是她说了算，而是她的父母。
现在开发一个Web程序，至少f需要测试三种浏览器：Chrome, Firefox, IE；IE至少测试三个版本：IE6, IE8, IE9。如果所有浏览器都支持一个标准，那天下最幸福的程序员非Web程序员莫属！
如果Web领域有FDA(美国食品药物管理局)这样的机构，不符合Web标准的浏览器坚决不让上市，那该多好啊！
附
完整HTML文件下载：https://files.cnblogs.com/dudu/css_unselectable_uncopyable.rar
测试高亮代码节选自：poj 1755 Triathlon 半平面交
