• web页面点击复制并跳转


    想了解更多,可前往最新个人博客:Amaya丶夜雨博客   或访问主页:https://www.amayaliu.cn

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

    一开始自己写,后面开始找杂七杂八的库,后面最终使用的是 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链接时,便会输出所复制的结果

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>web页面点击跳转并复制指定内容</title>
    </head>
    <body>
        <!--这里dic里面便是需要获取的内容-->
        <dic>欢迎前往 Amayaliu.cn - Amaya丶夜雨博客</dic>
        <a class="btn" href="https://amayaliu.cn" data-clipboard-action="copy" data-clipboard-target="dic">Copy</a>
    
        <!--采用cdn加速的 clipboard.js-->
        <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>

      

    https://amayaliu.cn/ Amayaliu丶夜雨 个人博客编写中 欢迎前往浏览.
  • 相关阅读:
    day 66
    day 66 作业
    day 65 作业
    day 55 Ajax
    day 56 forms组件
    day 59
    day 58 cookie与session 中间件
    day 54
    day 53
    day 52
  • 原文地址:https://www.cnblogs.com/AmayaYi/p/10684692.html
Copyright © 2020-2023  润新知