KonishiLee's Blog

Js 实现 Copy、Cut、Paste

项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,能不能通过JS来实现复制剪切呢,今天分享一个兼容IE7浏览器复制的插件给大家,支持使用javascript实现复制、剪切和粘贴。

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
}
});
//or
var copy = new clipBoard(document.getElementById('data'));
copy.copyd();

Cut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var cut = new clipBoard(document.getElementById('data'), {
beforeCut: function() {
},
cut: function() {
return document.getElementById('data').value;
},
afterCut: function() {
}
});
//or
var cut = new clipBoard(document.getElementById('data'));
cut.cut();

Paste

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var paste = new clipBoard(document.getElementById('data'), {
beforePaste: function() {
},
paste: function() {
return document.getElementById('data').value;
},
afterPaste: function() {
}
});
//or
var paste = new clipBoard(document.getElementById('data'));
paste.paste();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/**
* clipboard.js
* width clipboard.js, you can copy cut and paste clipboard data
* the main methods ard execCommand for modern browser and clipboardData for ie
* @author ganzw@gmail.com
* @url https://github.com/baixuexiyang/clipBoard.js
*/
;(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";
/**
* tar is the value
* @date 2016-04-25
* @param {[type]} tar [description]
* @param {[type]} options [description]
* @return {[type]} [description]
*/
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();
}
}
/**
* coping is to set the value to clipboard
* you can set the value through copy function, and the function be called autoly
* Also you can set the paramer and it will be set the clipboard
*/
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();
}
};
/**
* cut the value of input or textarea
* @date 2016-04-25
* @return {[type]} [description]
*/
clipBoard.prototype.cut = function() {
if (this.tar.type !== 'text' && this.tar.type !== 'textarea') {
return;
}
if (this.options.beforeCut) {
this.options.beforeCut();
}
if (document.execCommand) {
var element = this.tar;
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
element.select();
}
document.execCommand('cut');
}
// for ie
if (window.clipboardData) {
window.clipboardData.setData('text', this.tar.value);
this.tar.value = '';
}
// after copy
if (this.options.afterCut) {
this.options.afterCut();
}
};
/**
* paste the clipboard value to input or textarea
* @date 2016-04-25
* @return {[type]} [description]
*/
clipBoard.prototype.paste = function() {
if (this.tar.type !== 'text' && this.tar.type !== 'textarea') {
return;
}
if (this.options.beforePaste) {
this.options.beforePaste();
}
if (document.execCommand) {
var element = this.tar;
if(element.setSelectionRange) {
element.focus();
element.setSelectionRange(element.value.length, element.value.length);
} else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', element.value.length);
range.moveStart('character', element.value.length);
range.select();
}
document.execCommand('paste');
}
// for ie
if (!document.execCommand && window.clipboardData) {
this.tar.value += window.clipboardData.getData('text');
}
// after Paste
if (this.options.afterPaste) {
this.options.afterPaste();
}
};
return clipBoard;
});
如果喜欢这个分享,就帮忙买杯咖啡吧