公司官网有这样需求,写好后,备份以后留用。

只兼容chrome、firefox、IE9+等主流浏览器。

   // https://developer.mozilla.org/en-US/docs/Web/Events/copy
// https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/ClipboardEvent
// https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
(function (window, document, undefined) {
if (!window.getSelection) return;
//获取选中的HTML
var getSelectedContents = function () {
if (window.getSelection) { //chrome、firefox
var range = window.getSelection().getRangeAt();
var container = document.createElement('div');
container.appendChild(range.cloneContents());
return container.innerHTML;
//return document.getSelection(); //只复制文本
} else if (document.selection) { //IE
return document.selection.createRange().htmlText;
//return document.selection.createRange().text; //只复制文本
}
};
document.querySelector("body").addEventListener("copy", function() {
var selection = window.getSelection(),
url = location.href,
elem = document.createElement("div");
elem.innerHTML = getSelectedContents() + "<br/>" + "本文转自:" + url;
elem.cssText = "position:absolute;left:-99999px;";
document.querySelector("body").appendChild(elem);
selection.selectAllChildren(elem);
setTimeout(function () {
elem.remove();
}, );
});
})(window, document);

JS实现剪切板添加网站版权、来源的更多相关文章

  1. JS访问剪切板中的图片

    google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...

  2. JS从剪切板里粘贴图片

    功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...

  3. js修改剪切板内容的方法

    代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...

  4. js 操作剪切板

    1.IE浏览器 window.clipboardData: setData() //设置值 getData()//获取值 clearData()//删除值 /******* ** IE 浏览器下支持w ...

  5. Javascript操作剪切板数据(支持IE、Chrome、360、搜狗),亲测!

    clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...

  6. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  7. 使用clipboard.js复制页面内容到剪切板

    最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...

  8. js 将内容复制到剪切板上

    clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...

  9. clipboard.js 实现web端---> 复制到剪切板功能

    package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...

随机推荐

  1. [自制简单操作系统] 7、多任务(二)——任务管理自动化&任务休眠

    前言 >_<" 这里仿照窗口管理的方式将任务管理也修改成相应的管理模式,这样可以灵活的添加多个任务,而不必每次都要修改任务切换函数:此外还在任务休眠做了尝试,通过将任务挂起和唤醒 ...

  2. Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面

    Xamarin.Forms 是一个跨平台的.基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用户界面.Xamarin.Forms 通过 ...

  3. Facebook网络模拟测试工具ATC使用

    Facebook在其工程博客(原文)上宣布开源移动网络测试工具Augmented Traffic Control(ATC),我迅速试用了一番,非常不错,对手游或者其他APP的调试和测试都非常有帮助,介 ...

  4. atitit.提升开发效率---MDA 软件开发方式的革命(3)----自动化建表

    atitit.提升开发效率---MDA 软件开发方式的革命(3)----自动化建表 1. 建模在后自动建表 1 1. 传统上,需要首先建表,在业务编码.. 1 2. 模型驱动建表---更多简化法是在建 ...

  5. Leetcode 9 Palindrome Number 数论

    判断一个数是否是回文数 方法是将数回转,看回转的数和原数是否相同 class Solution { public: bool isPalindrome(int x) { ) return false; ...

  6. Leetcode-237 Delete Node in a Linked List

    #237.    Delete Node in a Linked List Write a function to delete a node (except the tail) in a singl ...

  7. css之选择器篇

    css能够获取到HTML结构上的元素,这个是怎么实现的了? 在我们看来这是个很神奇的事情,css可以写在页面之外,也可以写在页面内,而都不会影响到它去 获取这个元素,还有无论这个HTML结构多么复杂, ...

  8. Ruby on Rails框架开发学习

    学习地址:http://www.ixueyun.com/lessons/detail-lessonId-685.html 一.课程概述 软件开发在经历了面向过程编程的阶段,现在正大行其道的是敏捷开发, ...

  9. Android系统分区理解及分区目录细解

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. android: 内容提供器简介

    我们学了 Android 数据持久化的技术,包括文件存储.SharedPreferences 存 储.以及数据库存储.不知道你有没有发现,使用这些持久化技术所保存的数据都只能在当 前应用程序中访问.虽 ...