站长视角
用户至上

clipboard.js 添加已复制提示效果

修改一主题遇到的问题,需要为文章代码添加复制功能。点击复制有 clipboard.js 这个插件可用,但它不支持复制结果提示,使用体验不太好。看到 Bootstrap 文档里的效果不错,于是提取出来给大家参考。

复制提示用到 Bootstrap Tooltip 组件,除了引入 jQuery 和 Bootstrap 外,还需要 Popper.js (UMD 版本)。如果你用的 Bootstrap 3,则不依赖 Popper.js。但需要将 JavaScript 代码里的 _fixTitle 改为 fixTitle

引入资源

<link rel="stylesheet" rel="nofollow" href="https://cnidc.co/go?url=aHR0cHM6Ly9jZG5qcy5sb2xpLm5ldC9hamF4L2xpYnMvdHdpdHRlci1ib290c3RyYXAvNC40LjEvY3NzL2Jvb3RzdHJhcC5taW4uY3Nz" />
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.loli.net/ajax/libs/popper.js/1.9.9/umd/popper.min.js"></script>
<script src="https://cdnjs.loli.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.loli.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

HTML

<div class="demo"><pre><a rel="nofollow" href="https://cnidc.co/go?url=aHR0cHM6Ly93d3cuZXhhbXBsZS5jb20v">超链接</a></pre></div>
<figure class="demo"><pre><img src="https://www.example.com/favicon.png" alt="图片描述文本"></pre></figure>

JavaScript

$("figure.demo, div.demo").each(function() {
	$(this).before('<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="复制到剪贴板">复制</button></div>'),
	$(".btn-clipboard").tooltip().on("mouseleave", function() {
		$(this).tooltip("hide")
	})
});
var clipboard = new ClipboardJS(".btn-clipboard", {
	target: function(e) {
		return e.parentNode.nextElementSibling
	}
});
clipboard.on("success", function(e) {
	$(e.trigger).attr("title", "已复制").tooltip("_fixTitle").tooltip("show").attr("title", "复制到剪贴板").tooltip("_fixTitle"),
	e.clearSelection()
}),
clipboard.on("error", function(e) {
	$(e.trigger).attr("title", "未复制").tooltip("_fixTitle").tooltip("show").attr("title", "复制到剪贴板").tooltip("_fixTitle")
})

代码修改来源 https://getbootstrap.com/docs/4.4/assets/js/docs.min.js

香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!
赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《clipboard.js 添加已复制提示效果》
文章链接:https://cnidc.co/21341.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。
标签:
广告位招租,欢迎骚扰
香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏