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 使用技巧精萃(.net html
Apr 25 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
layui select动态添加option的实例
Mar 07 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python设计密码强度校验程序
2020/07/30 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
微博营销计划书
2014/01/10 职场文书
集体备课反思
2014/02/12 职场文书
住宅质量保证书
2014/04/29 职场文书
捐助倡议书
2015/01/19 职场文书
董事长致辞
2015/07/29 职场文书
关于车尾的标语大全
2015/08/11 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang