看到了两篇关于这题的讨论,简单的记录一下!o(* ̄▽ ̄*)ブ

1.  stackoverflow , How to add extra info to copied web text

2.  黑客派,https://hacpai.com/article/1510544423932

第一条使用两种方法对文章进行粘贴追加信息~~~

方法一:

①监听copy事件,然后将隐藏盒子中的信息添加到其中;

②结合window.selection()方法;

③浏览器兼容情况是主流浏览器IE8以上;

④线上demo http://jsfiddle.net/jp6nhmxf/ ;

⑤使用:复制一段文本再粘贴就会出现 pagelink中的内容 。

主要JS code

   function addLink() {
//Get the selected text and append the extra info
var selection = window.getSelection(),
pagelink = '\n\n Read more at: ' + document.location.href,
copytext = selection + pagelink,
newdiv = document.createElement('div'); //hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px'; //insert the container, fill it with the extended text, and define the new selection
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv); window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
} document.addEventListener('copy', addLink);

方法二:

①监听copy事件,然后修改剪贴板中的内容,也就是clipboard使用;

②结合window.clipboardData.setData()方法;

③浏览器兼容情况是IE4以上(换言之只针对于IE);

④线上demo http://jsfiddle.net/m56af0je/ (IE模式下起效);

主要JS code

    function addLink(event) {
event.preventDefault(); var pagelink = '\n\n Read more at: ' + document.location.href,
copytext = window.getSelection() + pagelink; if (window.clipboardData) {
window.clipboardData.setData('Text', copytext);
}
} document.addEventListener('copy', addLink);

⑤另外疑问点来了,使用clipboard能在其他浏览器(比如谷歌/火狐/safari)中工作吗?

主要JS code

 function addLink(event) {
event.preventDefault(); var pagelink = '\n\n Read more at: ' + document.location.href,
copytext = window.getSelection() + pagelink; (event.clipboardData || window.clipboardData).setData('Text', copytext);
} document.addEventListener('copy', addLink);

区别在 window.clipboarddata  <-->  event.clipboardData

亲测在兼容模式、极速模式、谷歌、火狐、IE等浏览器中均测有效!

第二条使用的方法跟第一条类似~~~

主要JS code

 /**
* @description 添加版权
*/
const addCopyright = () => {
const genCopy = () => {
return [
'',
'',
'作者:Vanessa',
'链接 [文章复制添加版权](https://hacpai.com/article/1510544423932) ',
'来源:黑客派',
'著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。',
]
} $('.content-reset').on('copy', function (event) {
if (!window.getSelection) {
return
} let copyString = window.getSelection().toString() if (copyString.length < 128) {
return
} if ('object' === typeof event.originalEvent.clipboardData) {
event.originalEvent.clipboardData.setData('text/html', copyString + genCopy().join(''))
event.originalEvent.clipboardData.setData('text/plain', copyString + genCopy().join('\n'))
event.preventDefault()
return
} $('body').append(`${copyString}${genCopy().join('')}`)
window.getSelection().selectAllChildren($('#pipeFixCopy')[0])
setTimeout(function() {
$('#pipeFixCopy').remove()
}, 200)
})
}

找一个空白地方复制粘贴测试,~~本人只在极速模式下测通过,其他未测~~

敬请留意~~

~~~抱拳撒花*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。~~~

【分享】JS如何为复制的Web文本添加其他信息的更多相关文章

  1. JS代码格式化排版工具,web文本编辑器

    js格式化代码工具:http://www.cnblogs.com/blodfox777/archive/2008/10/09/1307462.html web文本编辑器 :http://www.div ...

  2. web文本划线的极简实现

    开篇 文本划线是目前逐渐流行的一个功能,不管你是小说阅读网站,还是卖教程的的网站,一般都会有记笔记或者评论的功能,传统的做法都是在文章底部加一个评论区,优点是简单,统一,缺点是不方便对文章的某一段或一 ...

  3. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  4. Heatmap.js v2.0 – 最强大的 Web 动态热图

    Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...

  5. js 对象深复制,创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  6. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  7. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  8. 微信分享JS接口失效说明及解决方案

    关键字:微信分享 JS 失效  分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...

  9. c#调用js,以及js调用C#里的函数, c#自己生成js代码,实现对web的控制

    using mshtml;using System;using System.Collections.Generic;using System.Linq;using System.Security.P ...

随机推荐

  1. 打造RecyclerView的n级列表

    先上效果图: 1.该多级列表的优势: 支持无限级列表展开 基于一个recyclerView实现 可以自定义每一级item的样式,定制化更强 2.设计的思路 数据结构List,ItemBean类中有变量 ...

  2. mysql 5.7 配置文件说明

    1.配置文件样例 [client] #password= socket=/data/var/mysql/mysql.sock [mysqld_safe] pid-file=/data/var/mysq ...

  3. 记录ok6410 jlink 命令行调试uboot

    1\启动ok6410 进入uboot命令行 2\启动JLinkGDBServer -device ARM11 3\arm-none-eabi-gdb u-boot 初始化脚本 # Connect to ...

  4. FileFilter过滤器

    FileFilter过滤器原理: File对象的listFiles()方法做了三件事情: 第一件,遍历得到所有的文件/文件夹: 第二件,调用入参过滤器接口自己DIY的实现类中重写的accept()方法 ...

  5. 第一个Python窗口

    import tkinter def my_window(w, h): ws = root1.winfo_screenwidth(); hs = root1.winfo_screenheight(); ...

  6. python-布尔表达式

    1.布尔类型(bool): 1.只有两种情况  真/假 (True /  False) 2. print(type(False))      # <class 'bool'> type() ...

  7. SpringBoot+Thymeleaf问题

    springboot在controller返回数据到thymeleaf报404 用springboot做一个例子,访问controller可以返回数据,但是到thymeleaf却报404, 检查发现路 ...

  8. 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别

    构造代码块: 在类中定义可以给所有对象进行初始化.局部代码块: 在方法中定义属性的生命周期.静态代码块: 在类中定义用于给类调用时属性的初始化 构造函数与构造代码块的区别: 构造函数是给对应的对象进行 ...

  9. 2、每日复习点--ConcurrentHashMap vs HashMap vs HashTable

    HashMap:允许键或者值为null.底层是基于数组+链表的结构.默认初始容量是16,默认加载因子是0.75F,默认扩容增加一倍.如果指定了初始容量n,n必然在(2x,2x+1]范围内,n经过运算所 ...

  10. 【题解】Luogu P4381 [IOI2008]Island

    原题传送门 题意:求基环树森林的直径(所有基环树直径之和) 首先,我们要对环上所有点的子树求出它们的直径和最大深度.然后,我们只用考虑在环上至少经过一条边的路径.那么,这种路径在环上一定有起始点和终点 ...