لإضافة إشعار “Copied!” بعد نسخ النص بنجاح باستخدام clipboard.js، يمكنك استخدام خاصية text لإضافة النص إلى الأداة المستخدمة لعملية النسخ، ثم استخدام دالة show لإظهار الإشعار. فيما يلي كيفية تحقيق ذلك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy Text with Clipboard.jstitle>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js">script>
head>
<body>
<div class="container mt-5">
<textarea id="myTextarea" class="form-control">Text to be copiedtextarea>
<button id="copyButton" class="btn btn-primary mt-2">Copybutton>
<div id="tooltip" class="tooltip fade" role="tooltip">
<div class="tooltip-inner">
Copied!
div>
div>
div>
<script>
var clipboard = new ClipboardJS('#copyButton', {
text: function() {
return document.getElementById('myTextarea').value;
}
});
clipboard.on('success', function(e) {
var tooltip = new bootstrap.Tooltip(document.getElementById('tooltip'), {
placement: 'bottom',
boundary: 'window'
});
tooltip.show();
setTimeout(function() {
tooltip.hide();
}, 1000);
});
script>
body>
html>
هذا الكود يقوم بإنشاء نص قابل للنسخ في textarea، ثم يقوم بعملية النسخ عند النقر على زر “Copy”، وعندما تنجح عملية النسخ، يتم عرض إشعار “Copied!” لمدة ثانية واحدة ثم يختفي.
المزيد من المعلومات
بالطبع! clipboard.js هي مكتبة JavaScript تسمح بنسخ النصوص إلى الحافظة (clipboard) بسهولة. تعتمد المكتبة على حدث النقر (click) لتنفيذ عملية النسخ، وتوفر واجهة برمجية سهلة الاستخدام لإنشاء إشعارات أو أنماط أخرى من التفاعل بعد النسخ.
في الكود الذي قمت بتوفيره، تم إنشاء مثال بسيط لاستخدام clipboard.js، حيث يتم نسخ النص من عنصر textarea عند النقر على زر “Copy”، وعندما تنجح عملية النسخ، يتم عرض إشعار “Copied!” لمدة ثانية واحدة باستخدام مكون توجيه Bootstrap tooltip.
يمكنك استكمال التعديلات على الكود لتناسب متطلباتك الخاصة، مثل تغيير موضع الإشعار، أو تخصيص نمط الإشعار، أو إضافة المزيد من السلوك بعد عملية النسخ مثل تغيير لون الزر أو تعديل النص.
