jQuery库大家并不陌生，指的是网页中引用的jquery.js文件。
في حين أن مكتبة ClipboardJS التي يسمعها العديد من المطورين لأول مرة ، فإنها تشير إلى ملف clipboard.js الذي تشير إليه صفحات الويب.
قبل الإشارة إلى ملف clipboard.js ، يجب الإشارة إلى ملف jquery.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 ، ونسخ قيمة input في العنصر الفرعي لعلامة dl ، بعد النسخ الناجح ومطالبة نسخ ، ونسخ نص الإشارة لاستعادة المحتوى الأولي بعد ثوانين.
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的不同的浏览器兼容性都不错。
إضافة الأصدقاء