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 AJAX回调函数this指向问题
Feb 08 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解easyui 切换主题皮肤
Apr 04 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
PHP批量删除jQuery操作
2017/07/23 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
python中list常用操作实例详解
2015/06/03 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
医学生自我鉴定范文
2014/03/26 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
承诺书模板
2014/08/30 职场文书
技术经济专业求职信
2014/09/03 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers