CSS代码(二)：巧用content实现文档的防拷贝功能

在浏览器端实现文档的防拷贝是一件比较困难的事，一般需要监听拷贝事件，还需要禁用右键，甚至还要监听键盘事件，即使是这样，只要通过事件注册功能覆盖，依旧可以轻松实现拷贝功能。

而充分利用CSS中的content属性，可直接禁用文本选中功能，从而在不影响系统原有功能的情况下，轻松实现文档的防拷贝功能，并且这是浏览器底层支持，且没有事件注册，所以很难破解。

以下面的测试文本为例：

<p>Hello,</p>
<p>world!</p>

解决方法分为两步：
1. 首先将内容的展现方式替换为数据属性，如下：

<p data-val="Hello,"></p>
<p data-val="World!"></p>

1. 添加content样式信息，展示属性中内容：

<style type="text/css">
p::before{
    /* 利用attr读取节点内容 */
    content: attr(data-val);
}
</style>

现在，你可以试试，还能选中文本内容吗？

更神奇的是，利用jQuery也无法获取到文档的内容，如下：

$('p').each(function(i, item) {
    //  始终输出空字符串
    console.log($(this).text())
});

结论

CSS中content功能实在是太强大了，越琢磨越发现其中的巧妙无穷。