jQueryไลบรารีไม่ใช่เรื่องแปลกสําหรับทุกคนและหมายถึงไฟล์ jquery.js ที่อ้างอิงในหน้าเว็บ
ในขณะที่ Clipboard JS เป็นครั้งแรกที่นักพัฒนาหลายคนได้ยินมันหมายถึงไฟล์ clipboard.js ที่อ้างอิงจากหน้าเว็บ
คุณควรอ้างอิงไฟล์ jquery.js ก่อนที่จะอ้างอิงไฟล์ clipboard.js
ตัวอย่างเช่น :
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>เว็บไซต์อย่างเป็นทางการของ clipboard คือ:
การคัดลอกข้อความลงในคลิปบอร์ดไม่ควรยากไม่จําเป็นต้องใช้ขั้นตอนหลายสิบขั้นตอนในการกําหนดค่าและไม่จําเป็นต้องใช้หลายร้อย KB ในการโหลดแต่ที่สําคัญที่สุดคือไม่ควรพึ่งพา Flash หรือเฟรมที่พองตัวใด ๆ
นั่นคือเหตุผลที่ clipboard.js มีอยู่
นั่นเป็นเหตุผลที่ผมเลือกใช้ clipboard.js
ดังนั้นในทางปฏิบัติโค้ดควรเขียนอย่างไร?
ตัวอย่างเช่น เรากําลังแก้ไขปัญหาต่อไปนี้:
คลิกแท็ก dl เพื่อคัดลอกค่าของป้อนข้อมูลในองค์ประกอบย่อยของแท็ก dl เมื่อคัดลอกประสบความสําเร็จจะได้รับการแจ้งเตือนว่าคัดลอกแล้ว ข้อความแจ้งเตือนที่คัดลอกแล้วจะกลับคืนเนื้อหาเริ่มต้นหลังจาก 2 วินาที
รหัส html
<ul class="list-down">
<li class="BDown">
<dl>
<a href="#" title="百度网盘" rel="nofollow">
<dt>百度网盘</dt>
</a>
</dl>
<dl>
<span>提取密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="dfd3"></dt>
</dl>
<dl>
<span>解压密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="dgh4"></dt>
</dl>
</li>
<li class="FDown">
<dl>
<a href="#" title="阿里云盘" rel="nofollow">
<dt>阿里云盘</dt>
</a>
</dl>
<dl>
<span>提取密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="df3g"></dt>
</dl>
<dl>
<span>解压密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="g6d4"></dt>
</dl>
</li>
<li class="KDown">
<dl>
<a href="#" title="夸克网盘" rel="nofollow">
<dt>夸克网盘</dt>
</a>
</dl>
<dl>
<span>提取密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="df6h"></dt>
</dl>
<dl>
<span>解压密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="3g46"></dt>
</dl>
</li>
<li class="FDown">
<dl>
<a href="#" title="迅雷云盘" rel="nofollow">
<dt>迅雷云盘</dt>
</a>
</dl>
<dl>
<span>提取密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="4h67"></dt>
</dl>
<dl>
<span>解压密码</span>
<dt><input id="hn_Email" type="text" name="Email" value="3g46"></dt>
</dl>
</li>
</ul>รหัส js (วางไว้หลังการอ้างอิง clipboard.js)
$(document).ready(function() {
// 初始化ClipboardJS并选择要复制值的元素
var clipboard = new ClipboardJS('.list-down dl', {
// 获取要复制的文本
text: function(trigger) {
return $(trigger).find('input').val();
}
});
// 处理<dl>元素的点击事件
$('.list-down dl').on('click', function(e) {
e.preventDefault(); // 阻止原生事件
var spanElement = $(this).find('span');
var originalText = spanElement.text();
spanElement.text("'คัดลอกแล้ว'");
setTimeout(function() {
spanElement.text(originalText); // 还原<span>元素的内容
}, 2000); // 2秒后还原内容
});
// 处理剪贴板成功事件
clipboard.on('success', function(e) {
console.log('复制成功!');
e.clearSelection(); // 清除选中状态
});
// 处理剪贴板错误事件
clipboard.on('error', function(e) {
console.log('复制失败!');
});
});ผลการแสดงผลด้านหน้า
ในที่สุดก็มีมูลค่าการกล่าวขวัญว่า clipboard.js สามารถใช้งานร่วมกับเบราว์เซอร์ต่างๆ ได้ดี
เพิ่มบริการลูกค้า qq
ความคิดเห็นของชาวเน็ต