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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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函数与传递参数实例分析
2014/11/15 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
js验证表单大全
2006/11/25 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
浅谈Python中的bs4基础
2018/10/21 Python
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
班主任工作经验交流材料
2014/05/13 职场文书
校车安全责任书
2014/08/25 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
校园广播稿精选
2014/10/01 职场文书
团代会邀请函
2015/02/02 职场文书
离婚案件被告代理词
2015/05/23 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
新学期家长寄语2016
2015/12/03 职场文书