让图文不可复制

-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

user-select简介

这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性

user-select:值

auto——默认值，用户可以选中元素中的内容
none——用户不能选择元素中的任何内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
all——在编辑器内，如果双击/上下文点击发生在子元素上，该元素的最高级祖先元素将被选中。
-moz-none——firefox私有，元素和子元素的文本将不可选，但是input输入框中的文字除外（IE浏览器下是通过onselectstart="javascript:return false;"事件来实现该功能的）

结语
这个属性，在之前是被用来保护网站的内容，不被用户复制和转载，从而保护资讯的版权，但是这样却对普通用户的用户体验造成了伤害，而且，并不能真正的保护页面中的内容，通过查看源代码其实也可以复制。。。
现在，HTML5蒸蒸日上，很多网站或者web app会使用到Drag and Drop技术，user-select正好在一些情境中可以用到。

转载注明出处

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table</title><style></style>
</head>
<body><div class="copy-text"><p><textarea cols="12" rows="10">wqeqw</textarea></p><p>这是一段文字</p><p><input type="text" value="1111" /></p><p><button>安装</button></p></body>
<script>function addLink() {var body_element = document.getElementsByTagName('body')[0];var selection;if (window.getSelection) {//表示用户选择的文本范围或光标的当前位置。selection = window.getSelection();console.log(selection)// alert("文字复制成功！若有文字残缺请用右键复制\n转载请注明出处：" + document.location.href);} else if (document.getSelection) {//IE10selection = document.getSelection();alert("文字复制成功！若有文字残缺请用右键复制\n转载请注明出处：" + document.location.href);} else if (document.selection) {//IE6+10-selection = document.selection.createRange().text;alert("文字复制成功！若有文字残缺请用右键复制\n转载请注明出处：" + document.location.href);} else {selection = "";alert("浏览器兼容问题导致复制失败！");}var pagelink = "<br /><br /> 转载请注明来源: <a href='" + document.location.href + "'>" + document.location.href + "</a>";var copy_text = selection + pagelink;var new_div = document.createElement('div');new_div.style.left = '-99999px';new_div.style.position = 'absolute';body_element.appendChild(new_div);new_div.innerHTML = copy_text;selection.selectAllChildren(new_div);window.setTimeout(function () {body_element.removeChild(new_div);}, 0);}document.body.oncopy = addLink;</script>
</html>

复制后粘贴结果

让图文不可复制、转载注明出处相关推荐

（原创）网吧桌面背景添加文字，转载注明出处！
很简单的小工具,可用于公告等. 下载地址:http://pan.baidu.com/s/1i5dPQTJ 密码:sfw7 博客地址:http://www.cnblogs.com/flybox/ 如 ...
2015年1月微信上线原创声明功能：智能添加原创标识转载自动注明出处
微信上线原创声明功能:智能添加原创标识转载自动注明出处 2015.01.23 08:46:00来源: TechWeb.com.cn 作者:周小白 http://www.techweb.com.cn/ ...
SilverLight学习笔记--如何在xaml文件中操作用户在后台代码定义的类(2)--示例篇：创建一个登录控件(原创)(转载本文请注明出处)...
本文将示例如何运用前篇所写知识来建立一个用户自定义的登录控件.此控件界面非常简单,主要涉及的知识点是: 如何创建用户控件(包括对此控件的自定义事件和属性的编写,此处我们将创建一个名为LoginBo ...
转载标明出处用英语_公众号转载文章时应当注明出处
我国<著作权法>规定,著作权包括信息网络传播权,即以有线或者无线方式向公众提供作品,使公众可以在其个人选定的时间和地点获得作品的权利.根据该条的规定,著作权人对自己的网络作品拥有使用权. ...
引用请注明出处和转载请注明出处?我的看法
很多文章和网站都有这么一条: 引用请注明出处和转载请注明出处,有的无非多了个什么保留法律权力之类的其实想想看,国外XX 小站 "拿去用了" 怎么办,起诉? BT下载&quo ...
PyTorch踩过的坑（长期更新，转载请注明出处）
最近在知乎看到有人转载了这里的内容,提醒一下,欢迎转载,但是请注明出处,谢谢. 1. nn.Module.cuda() 和 Tensor.cuda() 的作用效果差异无论是对于模型还是数据,cuda ...
手写多位数字识别器实现（转载请注明出处！）
1.主要功能 ①界面化的输入方式,进行实时数字识别 ②可以识别多位的数字,例如23,234 ③CNN进行数字识别 2.运行环境 Windows10.python3.7+.tensorflow2.x 3 ...
程序员编程思想之数学素养（转载时请注明出处）
数值分析中的哲学思想转载时请注明出处:http://blog.csdn.net/makeyourchance/article/details/3812197 高等数学中我们遇到的问题 (1)遇到超越 ...

让图文不可复制、转载注明出处

让图文不可复制

user-select简介

转载注明出处

让图文不可复制、转载注明出处相关推荐

最新文章

热门文章