欢迎光临
我们一直在努力
卡尔云 大网数据--高防低价服务器抢购 低至28/月十堰4-4就在零零陆云计算 金华高防物理机 40H64G 30M 158/月 819云计算香港20MCN2 300元/月
林枫云-专注独立IP高频VPS 低价高性价比—迅速云 GoDo云计算韩国物理机低至299元/月 龍行数据:美国100M服务器 299元/月 络V云计算:新加坡100M服务器 1200元/月
CNMCDN防护稳定又实惠 轻松云:美国200兆VPS16元/月 亦宁云200M大带宽 动态BGP低至35/月 低价高效上云-道之云网络 【科御云】香港CDN、延迟低速度快防御高

利用clipboard.js复制粘贴JS插件实现页面特定文本按钮复制

我们在设计网站的时候,有些效果需要不断的提高用户体验。比如我们在页面中的微信号、电话号码、优惠码等信息,最好不要用户直接复制。如果能直接点击按钮直接复制效果还是比较好体验的。这里我们可以使用clipboard.js复制粘贴JS插件实现。

微信号 :  <span id=\\\"target\\\">laobuluo</span> <button class=\\\"btn\\\" data-clipboard-action=\\\"copy\\\" data-clipboard-target=\\\"#target\\\" id=\\\"copy_btn\\\">添加</button><script>        $(document).ready(function(){               var clipboard = new Clipboard(\\\'#copy_btn\\\');            clipboard.on(\\\'success\\\', function(e) {                alert(\\\"微信号:laobuluo 复制成功\\\",1500);             e.clearSelection();                console.log(e.clearSelection);            });        });    </script>

这个仅仅是简单的示范,光有这个代码还是不行的,我们还需要最为主要的2个JS文件。

jquery.min.js

clipboard.min.js

我们需要下载且引用到网站中。

网盘下载(提取码:8m2j)

这里蜗牛有备份下载,我们也可以从官方库下载JS。具体引用到网站,我们需要调整CSS。

赞(0)
未经允许不得转载:沃园 » 利用clipboard.js复制粘贴JS插件实现页面特定文本按钮复制

评论 抢沙发

评论前必须登录!

立即登录   注册