html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容
网页操作内容复制内容后纯js实现监听自动追加自定义内容
不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢?
其实实现的方式很简单,可以在我的网站页面上绑定一个copy事件,当你复制文章内容的时候,自动在剪切板文字后面加上一段版权声明。
既然有的网站已经添加了,也可以手动删除,其实意义不是很大,但是作为技术人员大家都是靠代码技能吃饭的,可以体会到写代码的不易,相信一定会尊重知识劳动成果,保留出处等版权信息的。
效果示例:
代码示例:
// 监听整个网页的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张无忌 版权所有');
}
});
以上代码相关参数详解:
element.addEventListener(type, handle, false);
type: 事件触发类型,如click,keypress等等,下面我们详细的讲讲事件类型!!
handle:事件处理函数,事件出发后,定义可能发生的变化!!
false: 表示事件冒泡模型,一般来说都是false。
clipboardData :
clipboardData 属性保存了一个 DataTransfer 对象(用户剪切板的内容)。
format数据类型有:text/plain,text/uri-list。data表示要添加到剪切板的数据。描述哪些数据可以由 cut 和 copy 事件处理器放入剪切板,通常通过调用 setData(format,方法;设置拖放操作的数据(剪切板的数据)到指定的数据和类型。
获取由 paste 事件处理器拷贝进剪切板的数据,通常通过调用 getData(format) 方法。
event.preventDefault() 方法阻止元素发生默认的行为。
例如:1、当点击提交按钮时阻止对表单的提交。2、阻止以下 URL 的链接。
参考原文连接:https://www.cnblogs.com/zhaohongcheng/p/12208492.htm
html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容相关推荐
- vuejs项目纯js导出word、在线下载富文本内容或者网页另存为word文件
所有前端导入导出方法集合: 前端必备技能知识:JS导出Blob流文件为Excel表格.Vue.js使用Blob的方式实现excel表格的下载(流文件下载)_勤动手多动脑少说多做厚积薄发-CSDN博客_ ...
- html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容
这次给大家带来怎样操作js实现二级菜单点击显示当前内容,操作js实现二级菜单点击显示当前内容的注意事项有哪些,下面就是实战案例,一起来看一下. 最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级 ...
- 帝国重新生成html,帝国CMS实现提交评论后自动重新生成内容页
帝国CMS实现提交评论后自动重新生成内容页 发布时间:2020-08-15 16:09:23 来源:亿速云 阅读:88 作者:小新 这篇文章给大家分享的是有关帝国CMS实现提交评论后自动重新生成内容页 ...
- html5幻灯片 自动滑动,纯js和CSS3炫酷自动幻灯片特效
Karrot Slider是一款纯Javascript和CSS3制作的自动播放的幻灯片插件.该幻灯片没有任何外部依赖,内置有8种不同的动画过渡效果.该幻灯片支持响应式图片设计模式,也可以制作为全屏幻灯 ...
- 多功能流媒体播放器实现网页无插件直播之EasyPlayer.js如何实现播放完自动循环播放
EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进行过优化的流媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低.最近我们遇到 ...
- 分享!微信打开网页提示“如需浏览请长按网址复制后到浏览器打开”的解决方案
背景 大家是不是经常会遇到这种情况,分享出去的网页链接在微信里打开会提示"如需访问,请长按网址复制后使用浏览器访问",当大家看到这种的提示的时候就说明你访问的网页已经被微信拦截了. ...
- vue webpack压缩代码_vue.js - 解决vue-cli打包后自动压缩代码
当我们用vue脚手架做完项目后,npm run build打包之后, 有没有查看源码,全是压缩好的.但是我就不想让它压缩,该怎么办呢? 困惑了几天,查了各种资料.终于终于... 来,上干货: 首先,我 ...
- js 跳转页面后自动触发一个点击事件
例如:接入七鱼客服 实现:onload onload 事件会在页面或图像加载完成后立即发生. onload 通常用于 <body> 元素,在页面完全载入后(包括图片.css文件等等.)执行 ...
- Node.js笔记 - 修改文件后自动重启node服务
每次修改代码后都要手动重启node服务,虽然不是复杂的事,但是每次都要这么搞一次颇为麻烦. 所以nodemon登场了! nodemon会监测你已运行程序中的文件和目录,一旦被修改,它会自动重启node ...
最新文章
- VC编写自己构造http协议数据的post上传图片类(MFC环境 带编码转换)(转)
- 关于mysql的表名/字段名/字段值是否区分大小写的问题
- json支持的最大长度_Swifter.Json 可能是 .Net 平台迄今为止性能最佳的 Json 序列化库【开源】...
- web框架应具备的功能
- 【珍藏】 2012.NET开发必看资料53个+经典源码77个—下载目录
- Python之访问set
- 企业中有关Server Sharing的一点想法
- ajax 跨域 iis7,IIS中使用URL rewrite配置跨域调用
- Outlook设置签名/设置邮件模板
- Authentication—身份验证流程
- POI复制Excel模板并填充数据
- 华为防火墙查看日志命令_华为USG防火墙运维命令大全
- PHP文件向sqlite3数据库插入数据,出现UNIQUE constraint failed异常
- LaTex 编译 bib 参考文献
- 灌木修剪机的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 欣赏深圳东部最迷人的东冲海岸线与最纯净的沙滩
- JavaScript编程入门
- 初探大规模GBDT训练
- 掏库存分享——抖音平台上可以用来当背景音乐的歌曲
- MATLAB 对多个数据自动寻峰/能谱图自动寻峰