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 相关文章推荐
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue 如何使用递归组件
Oct 23 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
example2.php
2006/10/09 PHP
PHP 中关于ord($str)>0x80的详细说明
2012/09/23 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python tkinter label 更新方法
2018/10/11 Python
python单例设计模式实现解析
2020/01/07 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
测量工程专业求职信
2014/02/24 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
庆七一活动总结
2014/08/27 职场文书
党风廉正建设责任书
2015/01/29 职场文书
企业党建工作总结2015
2015/05/26 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
Python基本数据类型之字符串str
2021/07/21 Python