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 删除/替换DOM元素的几种方式
May 20 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 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反弹shell实现代码
2009/04/22 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
Python 爬虫模拟登陆知乎
2016/09/23 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
基于Pytorch SSD模型分析
2020/02/18 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Python识别处理照片中的条形码
2020/11/16 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
英雄儿女观后感
2015/06/09 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
zabbix监控mysql的实例方法
2021/06/02 MySQL
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA