[Web前端]CSS实现“不可选择，不可复制”面临的问题网页设计 -电脑资料

电脑资料时间：2019-01-01 我要投稿

【www.unjs.com - 电脑资料】

问题背景

在博客园代码高亮中，如果显示了行号，读者在复制代码时会将行号一起复制出来，要删除这些行号，代码才可用，

[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"><span>.cnblogs_code</span><span>{</span><span>background-color</span><span>:</span><span>#F5F5F5</span><span>;</span><span>font-family</span><span>:</span><span>Courier New</span><span>;</span><span>font-size</span><span>:</span><span>12px</span><span>;</span><span>border</span><span>:</span><span>1px solid #CCCCCC</span><span>;</span><span>padding</span><span>:</span><span>5px</span><span>;</span><span>overflow</span><span>:</span><span>auto</span><span>;</span><span>}</span><span>.codeLineNumber</span><span>{</span><span>color</span><span>:</span><span>#008080</span><span>;</span><span>}</span></style></head><body><div class="cnblogs_code">

浏览器中的显示效果：

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>

郁闷！号称程序员最喜欢的浏览器，竟然不能实现“不可复制”，

电脑资料

《[Web前端]CSS实现“不可选择，不可复制”面临的问题网页设计》(https://www.unjs.com)。除了第一个行号，其他行号依然会被复制。

在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"><span>.cnblogs_code</span><span>{</span><span>background-color</span><span>:</span><span>#F5F5F5</span><span>;</span><span>font-family</span><span>:</span><span>Courier New</span><span>;</span><span>font-size</span><span>:</span><span>12px</span><span>;</span><span>border</span><span>:</span><span>1px solid #CCCCCC</span><span>;</span><span>padding</span><span>:</span><span>5px</span><span>;</span><span>overflow</span><span>:</span><span>auto</span><span>;</span><span>}</span><span>.codeLineNumber</span><span>{</span><span>color</span><span>:</span><span>#008080</span><span>;</span><span>}</span></style></head><body><div class="cnblogs_code">

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文件下载：http://files.cnblogs.com/dudu/css_unselectable_uncopyable.rar

测试高亮代码节选自：poj 1755 Triathlon 半平面交

相关文章