JavaScript实现复制或剪切内容到剪贴板功能的方法

 更新时间:2016年05月23日 17:17:48   投稿:goldensun  
这篇文章主要介绍了JavaScript实现复制或剪切内容到剪贴板功能的方法,我们平时看到的网页上很多一键复制功能就是如此实现,需要的朋友可以参考下

项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,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();
    }
  };

    
   

相关文章

  • 微信小程序实现弹出菜单功能

    微信小程序实现弹出菜单功能

    最近做项目需要这样的需求,当用户点击标签栏按钮,向下弹出菜单,再次点击,收回菜单。接下来通过本文给大家介绍微信小程序实现弹出菜单功能,感兴趣的朋友一起看看吧
    2018-06-06
  • js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    这篇文章主要给大家介绍了关于Javascript中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • fullPage.js和CSS3实现全屏滚动效果

    fullPage.js和CSS3实现全屏滚动效果

    这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 基于HTML5上使用iScroll实现下拉刷新,上拉加载更多

    基于HTML5上使用iScroll实现下拉刷新,上拉加载更多

    本文主要介绍在HTML5中使用iScroll实现下拉刷新,上拉加载更多数据的方法,主要就是写了两个自定义函数pullDownAction和pullUpAction,分别在下拉和上拉的事件中调用他们。
    2016-05-05
  • JS中style.display和style.visibility的区别实例说明

    JS中style.display和style.visibility的区别实例说明

    下面的例子说明了这种区别:在这个例子中,divContent1和divContent2隐藏的时候用的是style.display=none,这时候,后面的div会向上移动,占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏,但是其隐藏后仍然占据原来的空间
    2013-03-03
  • js实现电灯开关效果

    js实现电灯开关效果

    这篇文章主要为大家详细介绍了js实现电灯开关效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • checkbox全选所涉及到的知识点介绍

    checkbox全选所涉及到的知识点介绍

    checkbox全选涉及到的知识点比如IE里起作用,火狐不起作用,getElementById()与getElementsByName()的区别等等
    2013-12-12
  • 如何使用JS获取IE上传文件路径(IE7,8)

    如何使用JS获取IE上传文件路径(IE7,8)

    本篇文章是对使用JS获取IE上传文件路径的实现代码进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • javascript定义函数的方法

    javascript定义函数的方法

    javscript中定义和声明函数有三种方式:正常方法 构造函数 函数直接量。
    2010-12-12
  • echarts实现排名柱状图的示例代码

    echarts实现排名柱状图的示例代码

    在ECharts中,可以通过设置数据的顺序来控制柱状图的排序,本文就介绍了echarts实现排名柱状图的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09

最新评论