Welcome 微信登录

首页 / 脚本样式 / JavaScript / JavaScript实现复制或剪切内容到剪贴板功能的方法

项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,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();pastevar 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 soonif (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 valueif (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 valuevalue = value || this.tar.value || this.tar.innerText;if (this.options.copy) {value = this.options.copy();}// for modern browserif (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 ieif (window.clipboardData) {window.clipboardData.setData("text", value);}// after copyif (this.options.afterCopy) {this.options.afterCopy();}};