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 常用功能总结
Mar 18 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
js使用递归解析xml
Dec 12 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
vue实现固定位置显示功能
May 30 Javascript
js实现随机8位验证码
Jul 24 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
JS如何生成动态列表
Sep 22 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
mysql 搜索之简单应用
2007/04/27 PHP
php汉字转拼音的示例
2014/02/27 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
javascript中new关键字详解
2015/12/14 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
layui文件上传实现代码
2017/05/20 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python中元类用法实例
2014/10/10 Python
Python的多维空数组赋值方法
2018/04/13 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
仓库管理制度
2014/01/21 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
心得体会的写法
2014/09/05 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python