JavaScript实现复制或剪切内容到剪贴板功能的方法


Posted in Javascript onMay 23, 2016

项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,能不能通过JS来实现复制剪切呢,今天分享一个兼容IE7浏览器复制的插件给大家,支持使用javascript实现复制、剪切和粘贴。
方法。

复制

var copy = new clipBoard(document.getElementById('data'), {
  beforeCopy: function() {

  },
  copy: function() {
    return document.getElementById('data').value;
  },
  afterCopy: function() {

  }
});

复制将自动被调用,如果你想要自己调用:

var copy = new clipBoard(document.getElementById('data'));
copy.copyd();

document.getElementById('data') :要获取的对象, 你也可以使用jQuery $('#data')

剪切

基本上与复制的实现方法相同:

var cut = new clipBoard(document.getElementById('data'), {
  beforeCut: function() {

  },
  cut: function() {
    return document.getElementById('data').value;
  },
  afterCut: function() {

  }
});

或者

var cut = new clipBoard(document.getElementById('data'));
cut.cut();
paste

var paste = new clipBoard(document.getElementById('data'), {
  beforePaste: function() {

  },
  paste: function() {
    return document.getElementById('data').value;
  },
  afterPaste: function() {

  }
});

或者

var paste = new clipBoard(document.getElementById('data'));
paste.paste();

完整代码:

(function(name, fun) {
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = fun();
  } else if (typeof define === 'function' && define.amd) {
    define(fun);
  } else {
    this[name] = fun();
  }
})('clipBoard', function() {
  "use strict";

  function clipBoard(tar, options) {
    this.options = options || {};
    this.tar = tar[0] || tar;
    // if options contain copy, copy will be applied soon
    if (this.options.copy) {
      this.copyd();
    }
    if(this.options.cut) {
     this.cut();
    }

    if(this.options.paste) {
     this.paste();
    }
  }

  clipBoard.prototype.copyd = function(value) {
    // before the copy it will be called, you can check the value or modify the value
    if (this.options.beforeCopy) {
      this.options.beforeCopy();
    }
    // if the options set copy function, the value will be set. then get the paramer value.
    // above all, if the value is null, then will be set the tar of value
    value = value || this.tar.value || this.tar.innerText;
    if (this.options.copy) {
      value = this.options.copy();
    }
    // for modern browser
    if (document.execCommand) {
      var element = document.createElement('SPAN');
      element.textContent = value;
      document.body.appendChild(element);
      if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
      } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(element);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
      document.execCommand('copy');
      element.remove ? element.remove() : element.removeNode(true);
    }
    // for ie
    if (window.clipboardData) {
      window.clipboardData.setData('text', value);
    }
    // after copy
    if (this.options.afterCopy) {
      this.options.afterCopy();
    }
  };

    
   

Javascript 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
JavaScript类的写法
Sep 17 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
layDate插件设置开始和结束时间
Nov 15 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
JavaScript的Vue.js库入门学习教程
May 23 #Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 #Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 #Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 #Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 #Javascript
jQuery插件formValidator实现表单验证
May 23 #Javascript
超链接怎么正确调用javascript函数
May 23 #Javascript
You might like
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
js实现拖拽效果
2015/02/12 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jquery 手势密码插件
2017/03/17 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
vue实现登录拦截
2020/06/29 Javascript
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python算术运算符实例详解
2017/05/31 Python
python数据封装json格式数据
2018/03/04 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python实现石头剪刀布程序
2021/01/20 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
管理建议书范文
2014/05/13 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2015年项目工作总结
2015/04/29 职场文书
主持人大赛开场白
2015/05/29 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫