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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
ie focus bug 解决方法
Sep 03 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
基于jquery实现五星好评
Nov 18 jQuery
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
vue-model实现简易计算器
Aug 17 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 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强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
JS实现留言板功能
2017/06/17 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
学年自我鉴定
2014/01/16 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL