前言

​ 之前也做过点击文本框内容自动复制的功能，但从来没遇到过点击非文本框自动复制的需求。在这里也一起记录下，如何实现这两种情况。

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” 可以实现剪切功能。

追加：之后发现动态添加到页面的内容，点击后复制，需要点击两次才生效。