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

“浮山水饺”通过精心收集，向本站投稿了3篇[Web前端]CSS实现“不可选择，不可复制”面临的问题网页设计，下面就是小编给大家带来的[Web前端]CSS实现“不可选择，不可复制”面临的问题网页设计，希望能帮助到大家!

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

问题背景

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

为了解决这个麻烦，我们开始采用的方法是在高亮代码下面提供一个“复制代码”链接，点击这个链接时，通过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 半平面交

篇2：CushyCMS：基于Web的CSS内容管理系统网页设计

CushyCMS ，一款基于浏览器平台的CSS内容管理系统，允许用户在线对层叠样式表单进行有效的管理和编辑，

CushyCMS 是一款基于Web的CSS内容管理系统（CMS-Content Management System），它可以方便用户在线实现对CSS文件的编辑和管理。相比于传统的CSS编辑管理器而言，CushyCMS 在很多地方具有其他客户端软件所不能比拟的优势，用户甚至不需要对网络编程语言有太深入的了解，只有稍微懂得如何将CSS类添加到HTML标签中即可轻松上手对CushyCMS的在线操作等，

另外，CushyCMS 本身还具备了代码高亮显示、自动完成、纠错等诸多功能；同时，为了有效地提高用户的工作效率，CushyCMS 还提供了简单的FTP帐户绑定上传功能。

[如果您是RSS Reader，您可能无法收看到上面一段视频，请点击这里收看]

来自：www.showeb20.com/?p=981

篇3：浅谈个人在瀑布流网页的实现中遇到的问题和解决方法网页设计

随着pinterest的走红，瀑布流式的布局被越来越多的网站所使用，这种布局确实有很多好处，图片列表页有很强大的视觉感染力，而且还提高了用户“发现好图”的效率，瀑布流的实现有很多种方式，之前淘宝UED有篇文章详细的介绍过各种方式的优劣。今天我们主要讨论一下绝对排序来实现瀑布流的方式 即 Pinterest 采用的方式。

先上Demo

瀑布流排序 :cued.xunlei.com/demos/publ/demo1.html

瀑布流+无限拖cued.xunlei.com/demos/publ/demo2.html

首先说下瀑布流的排序算法，参考demo1，思路非常简单，我们把瀑布流拆成三个部分来看：容器、列、格子

1.先计算当前屏幕最多能容纳几列瀑布，其值为 “向下取整(屏幕可见区域宽度/(格子宽度+间距))”;

2.为了保证容器的居中，将容器的宽度设置为 列数*(格子宽度+间距) – 间距，这里需要注意的是 当容器的宽度计算出来之后再显示，否则会造成页面宽度的抖动，影响体验。;

3.排序开始，先把前N（N为列数）个格子分别放到每一列中，然后每次寻找高度最小的一列，把格子放进去（left值为列序号*(格子宽度+间距)，top值为 列高+间距），并刷新列的高度，遍历所有格子直到所有的格子都被排序。

最后将事件句柄绑定到window.onload和window.onresize上，一个瀑布流布局的页面就出来了。

这样的排序算法看起来很美好，可真正结合异步加载数据应用到页面里还要解决以下几个问题

1.当缩放浏览器窗口时会不断地触发事件，如果每次都响应的话会狂耗性能，需要在缩放动作结束后再执行重排方法。

2.页面滚动到底部请求数据成功之后只对新增的节点重排，

3.如果服务器无法给出图片高度，需要在图片加载完毕之后再进行重排。

第一个问题我是用setTimeout和clearTimeout来解决的，思路是窗口变化之后开始计时，如果窗口还在变换则从新开始计时，窗口不再变化则延时（很短的时间）触发重排事件。暂时只想到这个，这里应该还有更好的方法。

代码如下

var re;

window.onresize = function() {

clearTimeout(re);

re = setTimeout(resize,100);

};

第二个问题在于如果每次有新的数据加载，都要对整个容器内的节点进行重排，非常消耗性能。解决思路：

1.将列保存在全局数组中，每次重排或者新增格子之后更新数组的数据，这样下次执行排序算法的时候可以直接调用。

2.将新增格子保存在数组中作为参数传递给排序算法，仅对新格子进行遍历和操作。

第三个问题是如果服务器无法给出图片尺寸，那么必须在图片完全加载完毕之后才可进行排序(因为高度是实时获取的，图片不全高度有误差)，这里没有什么好办法，只能遍历图片，每张图片加载成功后执行一个回调函数，将加载成功的图片数量+1，当加载成功的图片数量等于图片总数的时候执行排序方法。缺点是有一张图片加载不成功就无法看到所有的，真正项目中还是需要在异步加载数据的时候获取图片尺寸。

好了，以上就是在这次瀑布流实现过程中遇到的问题和解决方法，由一开始加载3-4屏就卡死到现在可以无限加载(ff,chrome)，深感优化js的必要性和无限性。一点小心得写在这里权当抛砖引玉，大家对瀑布流实现的优化有什么见解欢迎一起交流讨论。

PS:一点视觉上的优化，如果服务器可以给出图片尺寸的话，返回的json字符串应该是按照高度从高到低排序的，这样可以使瀑布流底部尽量持平（感谢书生的指点）。

【[Web前端]CSS实现“不可选择，不可复制”面临的问题网页设计】相关文章：

1.Yahoo! 新版首页前端代码浅析网页设计

2.基于Web的高校团委信息管理系统设计与实现论文

3.js应用实现博客个性主页布局拖拽功能网页设计