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 هو:
لن يكون من الصعب نسخ النص إلى الحافظة.لا يتطلب عشرات الخطوات للتكوين ، ولا يتطلب مئات الكيلو بايت للتحميل.ولكن الأهم من ذلك ، لا ينبغي أن يعتمد على 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 جيد.
إضافة الأصدقاء