هناك العديد من المكونات الإضافية التابعة لجهات خارجية يمكنها تنفيذ وظيفة النسخ، ولكن إذا قمنا بذلك بأنفسنا، فهل نعرف كيفية تنفيذها؟
تقدم هذه المقالة ثلاثة خيارات للتنفيذ.
باستخدام واجهة برمجة التطبيقات للحافظة غير المتزامنة
هذه الطريقة هي الأسهل في الاستخدام، لكن التوافق ليس جيدًا جدًا وهناك العديد من المتطلبات.
نموذج التعليمات البرمجية:
const Promise = navigator.clipboard.writeText(newClipText);
لاحظ أن القيمة المرجعة للأسلوب هي Promise. وعند استخدام هذه الطريقة، يجب أن تكون الصفحة في بؤرة التركيز، وإلا سيتم الإبلاغ عن خطأ.
تستخدم Document.execCommand،
على الرغم من التخلي عن هذه الطريقة ولم تعد معيارًا للويب، إلا أنها تحتوي على العديد من العوامل التاريخية وأعتقد أن المتصفحات ستدعمها لفترة طويلة.
<p id="content">123456</p> <button id="copyButton">نسخ</button>
عند نسخ عناصر DOM، يتعين عليك استخدام واجهة برمجة تطبيقات التحديد وواجهة برمجة تطبيقات النطاق بالإضافة إلى ذلك.
Developer.mozilla.org/en-US/docs/…
Developer.mozilla.org/en-US/docs/…
نموذج التعليمات البرمجية:
const CopyButton = document.getElementById('copyButton');
محتوى ثابت = document.getElementById('content');
CopyButton.addEventListener('click', function () {
اختيار ثابت = window.getSelection();
نطاق ثابت = document.createRange();
// قم بتعيين المحتوى المحدد range.selectNodeContents(content);
// امسح التحديد التحديد.removeAllRanges();
// أضف المحتوى المحدد Select.addRange(range);
document.execCommand('نسخ');
}); يجب مسح التحديد أولاً ثم إضافة النطاق.
توجد مشكلة تفصيلية هنا بعد النقر على زر النسخ، يتم تحديد المحتوى المنسوخ، وهو أمر مفاجئ بعض الشيء.
الحل هو استدعاء selection.removeAllRanges() بعد اكتمال النسخ لمسح التحديد.
خذ بعين الاعتبار موقفًا آخر حيث يحدد المستخدم جزءًا من الصفحة قبل نسخه. بعد اكتمال النسخ، بالإضافة إلى مسح محتوى النسخة المحدد، تحتاج أيضًا إلى استعادة المحتوى الذي حدده المستخدم قبل النسخ.
رمز التنفيذ كما يلي:
const CopyButton = document.getElementById('copyButton');
محتوى ثابت = document.getElementById('content');
CopyButton.addEventListener('click', function () {
اختيار ثابت = window.getSelection();
نطاق ثابت = document.createRange();
// قم بتخزين المحتوى الذي حدده المستخدم في ذاكرة التخزين المؤقت const currentRange =
Selection.rangeCount === 0 ? : التحديد.getRangeAt(0);
// تعيين جزء المستند range.selectNodeContents(content);
// امسح التحديد التحديد.removeAllRanges();
// قم بتعيين جزء المستند باعتباره المحتوى المحدد Select.addRange(range);
يحاول {
// انسخ إلى الحافظة document.execCommand('copy');
} مسك (يخطئ) {
// فشلت المطالبة بهذه النسخة} أخيرًا {
Selection.removeAllRanges();
إذا (النطاق الحالي) {
// استعادة المحتوى المحدد للمستخدم Select.addRange(currentRange);
}
}
}); قم أولاً بتخزين المحتوى الذي حدده المستخدم، ثم قم باستعادته بعد اكتمال النسخة.
واستخدم طريقة select لكائن عنصر الإدخال لتحديد المحتوى، وليست هناك حاجة لإنشاء جزء نطاق لتعيين المحتوى المحدد.
رمز المثال:
const CopyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
CopyButton.addEventListener('click', function () {
اختيار ثابت = window.getSelection();
المدى الحالي ثابت =
Selection.rangeCount === 0 ? : التحديد.getRangeAt(0);
// حدد محتوى الإدخال inputEl.select();
// انسخ إلى الحافظة حاول {
document.execCommand('نسخ');
} مسك (يخطئ) {
// فشلت المطالبة بهذه النسخة // . . .
} أخيراً {
Selection.removeAllRanges();
إذا (النطاق الحالي) {
// استعادة المحتوى المحدد للمستخدم Select.addRange(currentRange);
}
}
}); لن يؤدي النقر فوق زر النسخ أيضًا إلى إزالة المحتوى المحدد مسبقًا.
w3c.github.io/clipboard-a
... اقتبس جزءًا من التعليمات البرمجية في الرابط أعلاه كمثال:
// الكتابة فوق ما يتم نسخه إلى الحافظة.
document.addEventListener('نسخ'، الوظيفة (هـ) {
// e.clipboardData فارغ في البداية، لكن يمكننا ضبطه على
// البيانات التي نريد نسخها إلى الحافظة.
e.clipboardData.setData('text/plain', 'البيض المخفوق الغربي');
// يعد هذا ضروريًا لمنع تحديد المستند الحالي من
// تتم كتابته في الحافظة.
e.preventDefault();
}); انسخ أي محتوى على الصفحة وألصقه، وسيكون محتوى الإخراج هو "البيض المخفوق الغربي".