使用clipboard.js点击自动复制

官网http://www.clipboardjs.cn/下载号文件,然后导入

<script src="dist/clipboard.min.js"></script>

在需要的地方绑定,这里用的是从属性复制,比较符合场景,根据项目使用从元素复制剪切或者从属性

 <div class="zt topkefu" id="btnCopy"  class="fiexed-bottom-div" data-clipboard-text="123456">
 	客服微信:123456 (点击添加)
 </div>

最后加上js

<script type="text/javascript">
 
  

		    var clipboard = new ClipboardJS('#btnCopy');//具体绑定

		clipboard.on('success', function(e) {
		// 成功时
		    console.info('Action:', e.action);
		    console.info('Text:', e.text);
		    console.info('Trigger:', e.trigger);

		    e.clearSelection();
		    	alert("复制成功,请打开微信搜索联系人");
		});

		clipboard.on('error', function(e) {
		    //失败时
		    console.error('Action:', e.action);
		    console.error('Trigger:', e.trigger);

		    	alert("复制失败,请手动复制");
		});
 
	 

</script>  

然后就好了

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现点击自动复制内容到剪贴板,可以使用JavaScript和CSS结合的方式来实现。具体的做法是,用JavaScript监听元素的点击事件,当点击事件发生时,利用浏览器提供的API将内容复制到剪贴板中。同时,还可以利用CSS样式来提高用户体验,如改变鼠标指针的样式等。下面是一个示例代码: HTML代码: ``` <div class="copy" data-clipboard-text="这是要复制的内容">点击复制</div> ``` 在这个示例中,我们创建了一个带有class为`copy`的HTML元素,并将要复制的内容通过`data-clipboard-text`属性传递。在CSS中,我们为该元素设置了一些基本样式,如光标样式等。在JavaScript中,我们使用Clipboard API来实现复制到剪贴板的功能。示例代码如下: CSS代码: ``` .copy { cursor: pointer; padding: 10px; background-color: #ccc; color: #fff; } .copy:hover { background-color: #aaa; } .copy:active { cursor: wait; } ``` JavaScript代码: ``` const copyBtns = document.querySelectorAll('.copy'); copyBtns.forEach(btn => { btn.addEventListener('click', () => { const text = btn.dataset.clipboardText; navigator.clipboard.writeText(text).then(() => { console.log('复制成功'); }).catch(() => { console.log('复制失败'); }); }); }); ``` 在这个示例中,我们使用了`querySelectorAll`方法来获取所有class为`copy`的元素,并使用`forEach`方法遍历它们。然后,我们为每个元素添加了一个点击事件监听器,当元素被点击时,获取要复制的内容,然后调用`navigator.clipboard.writeText`方法将内容复制到剪贴板中。在成功或失败后,我们使用`console.log`方法输出信息。需要注意的是,由于Clipboard API目前仅在较新的浏览器中得到支持,因此在使用时需要进行兼容性检查。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值