[Web前端]CSS实现“不可选择,不可复制”面临的问题网页设计

2024-10-17

[Web前端]CSS实现“不可选择,不可复制”面临的问题网页设计

[Web前端]CSS实现“不可选择,不可复制”面临的问题网页设计 篇1

问题背景

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

为了解决这个麻烦,我们开始采用的方法是在高亮代码下面提供一个“复制代码”链接,点击这个链接时,通过js代码删除行号。

这个方法欠缺之处:1. 读者不一定注意到“复制代码”链接;2. 多了一次点击操作。

解决思路

读者复制代码的通常操作是鼠标拖拉选择代码内容,然后Ctrl+C进行复制。增加任何鼠标与键盘的操作,都不是好的解决方法。

我们想到的最简单的解决方法就是通过CSS来实现。

实现过程

主要参考内容:css rule to disable text selection highlighting

测试浏览器:Firefox, Chrome, IE9

HTML测试代码:

.cnblogs_code{background-color:#F5F5F5;font-family:Courier New;font-size:12px;border:1px solid #CCCCCC;padding:5px;overflow:auto;}.codeLineNumber{color:#008080;}

1<“ gt2lt=”>2<“ gt3lt=”>3<“ gt4lt=”>4<“ gt5lt=”>5<“ includeltcmathgtltspan=”#include“ includeltcstringgtltspan=”#include“>

浏览器中的显示效果:

1. Firefox中的实现

1.1 css代码:

.codeLineNumber{ -moz-user-select: none; /* for Firefox */}

1.2 选择效果:

注:除了行号1,其他行号都被选中了。

1.3 复制/粘贴效果:

#include #include #include #include #include

很棒!行号没有出现。在Firefox中通过css可以有效解决这个问题。唯一不足之就是选择时,除了第一个行号,其他行号都处于选中,违背了“所见即所得”。

2. Chrome中的实现

2.1 css代码:

.codeLineNumber{ -webkit-user-select: none; /* for Chrome */}

2.2 选择效果:

注:选择效果不错!行号没有被选中,Firefox要是能有这样的效果就完美了。

2.3 复制/粘贴效果:

#include2 #include3 #include4 #include5 #include

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

除了第一个行号,其他行号依然会被复制。

在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代码如下:

.cnblogs_code{background-color:#F5F5F5;font-family:Courier New;font-size:12px;border:1px solid #CCCCCC;padding:5px;overflow:auto;}.codeLineNumber{color:#008080;}

” includeltcmathgtltspan=“#include” includeltcstringgtltspan=“#include” unselectable=“on”>

3.2 选择效果:

3.3 复制/粘贴效果:

#include2 #include3 #include4 #include5 #include

继续郁闷!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文件下载:files.cnblogs.com/dudu/css_unselectable_uncopyable.rar

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

上一篇:生 命 之 重下一篇:《染纸》教学反思