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 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
水利学院求职自荐书
2014/02/01 职场文书
公司办公室岗位职责
2014/03/19 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
党员活动总结
2015/02/04 职场文书
Python学习之os包使用教程详解
2022/03/21 Python