不少技术博客有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢?
其实实现的方式很简单,可以在我的网站页面上绑定一个 copy 事件,当你复制文章内容的时候,自动在剪切板文字后面加上一段版权声明。
我这边是没有加这些的,代码什么的想复制就复制好了。大家都是靠代码技能吃饭的,可以体会写代码的不易,相信一定会尊重知识劳动成果——保留出处等版权信息的。
<body>
<p>是的你没有看错, 我还是在路边吃快餐, 在北京市的三里屯, 在上海市的外滩</p>
</body>
<script>
// 监听整个网页的copy(复制)事件
document.addEventListener('copy', function (event) {
// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
let clipboardData = event.clipboardData || window.clipboardData;
// 如果未复制或者未剪切,则return出去
if (!clipboardData) { return; }
// Selection 对象,表示用户选择的文本范围或光标的当前位置。
// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
let text = window.getSelection().toString();
if (text) {
// 如果文本存在,首先取消文本的默认事件
event.preventDefault();
// 通过调用常clipboardData对象的 setData(format, data) 方法;来设置相关文本
// setData(format, data);参数
// format
// 一个domString 表示要添加到 drag object的拖动数据的类型。
// data
// 一个 DOMString表示要添加到 drag object的数据。
clipboardData.setData('text/plain', text + '\n\n张无忌 版权所有');
}
});
</script>
type: 事件触发类型,如click,keypress等等,下面我们详细的讲讲事件类型!!
handle:事件处理函数,事件出发后,定义可能发生的变化!!
false: 表示事件冒泡模型,一般来说都是false。
clipboardData 属性保存了一个 DataTransfer 对象(用户剪切板的内容),这个对象可用于:
format 数据类型 有: text/plain , text/uri-list。data表示要添加到剪切板的数据。
例如:
原文 http://www.cnblogs.com/zhaohongcheng/p/12208492.html
原生Js实现复制(Copy)的两种方法,一种是利用 clipboardData,另外一种则是用 execCommand(),今天将统一讲解一下关于他们的使用方法。
这篇文章主要讲解:右键复制失效方法、菜单-文件-另存为-失效方法、防止查看源代码进行复制的方法、防止页面缓存的方法。来达到一定的代码保护效果
Js使用Object.assign()对象的复制:Object.assign()只对顶层属性做了赋值,Object.assign()合并/封装等操作:具有相同属性的其他对象覆盖;null、undefined会被忽略;字符串会被封装成单字符的可枚举属性数组
程序员个性注释,让你的代码飞起来。一时兴起就收集了以下神注释,希望能为广大ITer带来快乐,以下是收集了以下神注释,希望能为广大程序员们带来快乐,缓解你们工作中的压力
首先现在Vue中引入clipboard,在需要使用的组件中import 引入clipboard.不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象
工作中我们需要用到对象或者数组的复制功能,提交的form表单,需要进行处理,例如将表单中的数组变成,连接的字符串,这个时候我们直接对原表单直接处理是不妥当的
在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。纯js实现复制文本并提示复制成功(干货)适用所有浏览器
javascript设置网页无法复制的方法:在JavaScript代码中设置禁用右键菜单、复制、选择等操作,禁用Ctrl+c和Ctrl+v快捷键的使用,通过这种方法就可以实现网页无法复制。
最近在写页面的时候,需要在左上角加一个logo,但是复制的时候会把这张图片一块选中。那么我们可以通过CSS给它设置禁止选中,代码如下:
css可以使用user-select属性来设置不可复制,此属性可以设置或检索是否允许用户选中文本,将此属性的属性值设置为none可以使文本不可选中。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!