jQuery 实现复制功能
2024-09-03 12:59:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 复制功能</title>
<link rel="stylesheet" href="css/bootstrap4.5.min.css">
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
</head> <body> <style>
.share-card {
box-shadow: 0px 3px 8px 0 rgba(54, 57, 73, .1);
color: #fff;
margin: 0 auto;
} .share-cardCode {
margin: auto;
padding: 10px 5px;
border: 2px dashed #fff;
background-color: transparent;
} .share-card .active {
margin: auto;
padding: 10px 5px;
color: #0070ff;
border: 2px dashed #0070ff;
background: transparent;
cursor: auto;
} .share-copied {
/*opacity: 0;*/
width: 80px;
background: #101010;
margin: 41px -60px;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 8px 0;
position: relative;
font: normal normal normal 15px/1 FontAwesome;
} .share-copied::before {
position: absolute;
content: '';
margin: auto;
left: 32px;
top: -20px;
border-right: 10px solid #0000;
border-bottom: 10px solid black;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
} .btn:hover {
color: #fff !important;
}
</style>
<section>
<div class="max-width">
<span id="coupon-code-invalid-reasons"></span>
<div class="share-card text-center py-3 w-md-70 w-lg-50 mt-3 mt-md-5" style="background-color: rgba(51, 51, 51, 0.45)">
<div class="share-cardCode mb-3 w-70 w-md-50">
<p class="font-24 mb-0 share-card Code-number" id="copy1">这世界我来了,任凭风暴漩涡</p>
</div>
<button type="button" id="btns" class="btn w-40 margin-auto mb-0 mb-md-3 color-fff btns" data-toggle="modal" style="background-color:#0070ff;">
复制
</button>
</div>
</div>
</section> <script type="text/javascript">
var clipboard = new ClipboardJS(".btns", {
text: function() {
//清除字符串两端的空白
var texts = $(".Code-number").text().trim()
return texts;
}
}) //复制成功
clipboard.on('success', function(e) { //复制成功
console.log(e);
var tootpli = $('<div class="share-copied position-absolute"><span class="d-block">copied!</span></div>');
$(e.trigger).append(tootpli);
setTimeout(function() { // 2秒后隐藏
tootpli.remove();
}, 2000);
});
clipboard.on('error', function(e) { });
</script> </body> </html>
效果预览:
最新文章
- FineUI官方论坛出现空白页的解决办法!
- windows 录音程序(二)
- JS类的封装及实现代码
- STM32 flash 内存分布介绍
- UWP开发入门(十四)—— UserControl中Adaptive UI的小技巧
- matlab和FPGA中无符号数和有符号数的转化(转)
- jquery.validate中使用remote,remote相同值不校验问题解决
- [Android学习笔记]扩展application
- Vertica: 基于DBMS架构的列存储数据仓库
- 【Xilinx-Petalinux学习】-03-PetaLinux通过eMMC方式启动
- Linux中挂载Windows共享出来的目录
- [Luogu 4245] 任意模数NTT
- sqlserver操作geography方法
- NPOI “发现 中的部分内容有问题,是否要恢复此工作薄的内容?如果信任此工作薄的来源。。。”的问题的解决方法
- 数据仓库建模对比: 比较表格和多维解决方案 (Comparing tabular and multidimensional solutions)
- Elastic-Job 配置介绍
- flume http source示例讲解
- c#启动windows服务问题总结
- 使用PerfView监测.NET程序性能(一):Event Trace for Windows
- setOnPageChangeListener 过时了怎么办?