php 点击按钮自动复制,实现点击元素自动复制内容的功能

25d756da89dd2acf2fd6dc4eaa6309b9.png

前言

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

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实现。

兼容性如图所示:

d7e3dc1d8471d5180c13ff252122df91.png

那么如何解决低版本不兼容的问题呢?

官网指出: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” 可以实现剪切功能。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值