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 $.getJSON()跨域请求
Dec 21 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
AngularJS实现路由实例
Feb 12 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
Ant Design的Table组件去除
Oct 24 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代码实现页面伪静态的方法
2015/07/25 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
js不是基础的基础
2006/12/24 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
公司人力资源的自我评价
2014/01/02 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
股东合作协议书范本
2014/04/14 职场文书
安全教育月活动总结
2014/05/05 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
2014年保管员工作总结
2014/11/18 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python