web页面点击复制并跳转

♪ ♫ 不入漩涡深处,怎能知晓水下的美景? ♬
♪ ♫ 韩非：我让人点灯，这样才可以照亮你的美！ ♬
♪ ♫ 焰灵姬：（书里面）有没有如胶似漆？♬
♪ ♫ 韩非：胶和漆，易燃，易燃！♬
♪ ♫ 焰灵姬：我看这屋里最值钱的，就是你了！♬
♪ ♫ 韩非：我这人嗜酒如命，更加易燃。♬
♪ ♫ 焰灵姬：那我试试，能不能点燃你！♬

留言板

0
夜雨 | 留言 | 2019年2月23日

Chrome浏览最佳哦

不入漩涡深处,怎能知晓水下的美景

Amaya丶夜雨博客深圳前端"小白"鼠

你必须非常努力，才能看起来毫不费劲。
You have to work very hard to look effortless.

♪ 技 ♫ 术 ♪ ♪ 板 ♫ 块 ♪

♪ 联 ♫ 系 ♪ 方 ♫ 式 ♪

听风雨丶

AmSub993

Amaya丶夜雨 | 前端菜鸡 | 原创 | 2019年4月10日

0 |

今天在帮忙做一个微信跳转功能，同时复制微信号等，点击后便可跳转微信，然后粘贴，进行微信号的添加。

一开始自己写，后面开始找杂七杂八的库，后面最终使用的是 clipboard.js ，因为clipboard.js 是一个不依赖 Flash,将文本复制到剪贴板的插件，仅仅 2kb。而且利用 clipboard.js 可以非常简便的实现这一复制跳转功能。

重点来了：

1.代码中dic是我们点击后获取的内容(随意内容，亦可动态内容),为了方便快捷，我们利用H5的新特性，自定义标签

2.代码中的 A 标签，我们这里是为了方便，使用 A 标签，同时使用button，input，div，等等属性都可以，但跳转就需要自己多写一步了

3.data-clipboard-action="copy" 指明复制属性，data-clipboard-target="dic" 指明定义的选择器，dic则是我们刚刚自定义的标签

4.clipboard.js 在cdn开源库中拥有许多版本，1.0.0最初版本不行，2.0.4最高版不行，就随意截取中间的 1.5.1 版本

5.导入cdn <script src="https://cdn.bootcss.com/clipboard.js/1.5.1/clipboard.js"></script>

6.继续编写余下的js,建立clipboard对象（.btn 为对应点击的class，亦可id）以及复制后执行的方法，以便调试

7.运行页面，打开F12，当我们点击A链接时，便会输出所复制的结果

注：调试时可把链接地址关掉，否则复制后已跳转，看不见调试内容

下面我给出一组代码(可直接复制运行，无任何限制)：（转载请留个链接位哦）

//若点击失效请前往： <a href="https://www.cnblogs.com/AmayaYi/p/10684692.html">www.cnblogs.com/AmayaYi/p/10684692.html</a> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web页面点击跳转并复制指定内容</title> </head> <body>  <dic>欢迎前往 Amayaliu.cn - Amaya丶夜雨博客</dic> <a class="btn" href="https://amayaliu.cn" data-clipboard-action="copy" data-clipboard-target="dic">Copy</a>  <script src="https://cdn.bootcss.com/clipboard.js/1.5.1/clipboard.js"></script>  <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body> </html>

到这里就算结束了,希望对你们有所帮助吧. 附: (文章为原创,转载记得加上出处哦。)