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 中令人困惑的变量赋值
Aug 13 Javascript
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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记录页面停留时间的方法
2016/03/30 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
如何编写jquery插件
2017/03/29 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python读大数据txt
2016/03/28 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Django框架 信号调度原理解析
2019/09/04 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python与mysql数据库交互的实现
2020/01/06 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python3注册全局热键的实现
2020/03/22 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
编程输出如下图形
2013/11/24 面试题
幼儿园招生广告
2014/03/19 职场文书
软件项目开发计划书
2014/05/01 职场文书
欢迎新生标语
2014/10/06 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
周一问候语大全
2015/11/10 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang