前言
之前也做过点击文本框内容自动复制的功能，但从来没遇到过点击非文本框自动复制的需求。在这里也一起记录下，如何实现这两种情况。
1.点击文本框，自动全选(移动端比较直观)
ps: 这种情况也可以使用Clipboard.js实现
1
2
3
4
5
6
7
8
9
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
createTextRange()
主要是用来对一些文本对象进行操作.比如你有一大段文字,都在同一个P标签内,但是你只希望通过JS改变其中的一小部分,这时就可以用createTextRange来创建Range对象操作文本.因为默认情况下文本只是文本,并不是对象,要想像操作对象那样操作文本,只能是创建为Range对象.这是要操作的文本就具有了对象的功能和特性了。
2.点击非文本框，自动复制(以span标签为例)
方法：使用Clipboard.js实现。
兼容性如图所示：
那么如何解决低版本不兼容的问题呢?
官网指出：The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.
解决方案：
1
2
3clipboard.on('error', function(e){
alert('请选择“拷贝”进行复制!')
});
完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14微信号46333313
//init
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success', function(e){
alert('复制成功!');
e.clearSelection();
});
clipboard.on('error', function(e){
alert('请选择“拷贝”进行复制!')
});
3.点击按钮，自动复制文本框内容
方法：使用Clipboard.js实现。
完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Cut to clipboard
//init
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success', function(e){
alert('复制成功!');
e.clearSelection();
});
clipboard.on('error', function(e){
alert('请选择“拷贝”进行复制!')
});
data-clipboard-action=”cut” 可以实现剪切功能。
追加：之后发现动态添加到页面的内容，点击后复制，需要点击两次才生效。
