ينفذ HTML5 وظيفة النسخ المحمول

المرة الأولى التي واجهت فيها هذا المطلب كانت من خلال Baidu، لكنني وجدت أنه تم تنفيذه بشكل أساسي باستخدام js، وكان التوافق سيئًا للغاية.

ومع ذلك، أثناء عملية البحث والمحاولة، وجدت أنه يمكن تنفيذه بالكامل باستخدام كود CSS فقط، ما عليك سوى إضافة أسطر التعليمات البرمجية التالية إلى العلامات التي تحتاج إلى نسخ المحتوى.

 -webkit-touch-callout: الكل؛-webkit-user-select: الكل؛-moz-user-select: الكل؛-ms-user-select: الكل؛user-select: all؛

في الواقع، هذا يعني أن تشغيل المحتوى بواسطة المستخدم غير مقيد، وأن القائمة الافتراضية للنظام غير معطلة، وسيؤدي الضغط لفترة طويلة إلى عرض وظيفة النسخ المضمنة في النظام.

يعد clipboard.js مكونًا إضافيًا قويًا جدًا لللصق والنسخ، ولكن عند استخدامه على الجهاز المحمول، قد تنشأ مشكلات في التوافق. إليك الحل الذي أستخدمه كثيرًا.

أتش تي أم أل

 <معرف الإدخال=foo1 value=http://www.shellad.com/_2SP__22 (المحتوى المراد نسخه) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>نسخ< /زر></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); // الرجوع إلى إصدار أقدم بشكل أنيق: رقم إصدار Safari >=10، يطالبك بنجاح النسخة؛ وإلا فإنه يطالبك بتحديد النسخة يدويًا بعد تحديد النص clipboard.on ('success', function(e) { تنبيه('تم النسخ بنجاح!') console.log($(this)) e.clearSelection(); }); وظيفة (ه) { تنبيه ("الرجاء تحديد نسخة للنسخ!") });

لاحظ أنني أستخدم عنصر تحكم الإدخال بدلاً من div أوspan عند حفظ المحتوى المراد نسخه. لأنه أثناء الاختبار، يكون الإدخال فقط هو الذي يتمتع بأفضل توافق، ولن يسبب مشاكل، ويمكن أن يضمن النسخ المتماثل الطبيعي. وفي الوقت نفسه، لا يدعم المكون الإضافي إصدار Safari رقم <10، لذا يرجى العلم بذلك.

ما ورد أعلاه هو تطبيق HTML5 لوظيفة النسخ على الهاتف المحمول الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!