في الآونة الأخيرة ، نحتاج إلى إعطاء HTML5 WebApp لتنفيذ وظيفة نسخ على الصفحة: يمكن للمستخدمين تحديد النص وإيقاف تشغيل قائمة نسخ النظام في النص الطويل ، ويمكن للمستخدم النقر لنسخها لعملية النسخ ، ثم لصقها إلى AppStore البحث عن التطبيق المقابل. السبب في عدم استخدامه للانتقال مباشرة إلى تطبيق AppStore المقابل في شكل روابط هو زيادة وزن تطبيق الشركة المعززة من خلال البحث عن الكلمات الرئيسية في الإدخال النشط للمستخدم. لذا فإن وظيفة النسخ هذه ضرورية لتجربة المستخدم.
تجربة بعض الممارسات ، التوافق على منصة Android/iOS ليس جيدًا جدًا. في متصفح WeChat ، من السهل تحقيق نص طويل -الضغط لتحفيز قائمة النظام. لكن أداء المتصفحات الأخرى غير متسق. بما في ذلك إدخال تركيز المحاكاة ، اختيار JavaScript ، حاول تنشيط قائمة النظام مع علامة. هذه الطرق لها عيوب متوافقة.
1) على الرغم من استخدام علامة HREF على متصفح UC ومتصفح Baidu ، ستظهر النص طويلًا على نسخة مجانية/حدد قائمة النص. بعض هواتف Android ، في بعض هواتف Android ، يعتبر متصفح النظام و iPhone روابط خالصة ، فقط يظهر رابط النسخ ، دون نسخ القائمة النصية. علاوة على ذلك ، حتى لو تم اعتبار عدد صغير فقط من المتصفحات ممكنًا ، فسيكون لهذا خطوة أكثر لتشغيل المستخدمين ، مما يزيد من التعقيد. لذلك هذه الخطة ليست مرغوبة.
2) بمساعدة أساليب الاختيار والمدى ، يجب أخذ توافق المتصفحات المختلفة في الاعتبار.
الوظيفة SelectText (element) {var doc = docgetElementById (element) ، range ، selection ؛ Selection = RangeSelectNODEC. } آخر {Alert (none) ؛}}لسوء الحظ ، لا يمكن تحديد جميع النصوص عن طريق النقر فوق أو الضغط على عالي طويل على Safari iPhone (نظرًا لأنه يدعم أيضًا Window.getSelection ، لماذا لا يمكن تحديد النص افتراضيًا بعد عملية إضافة متصفح Safari ، يرجى ترك رسالة لهذا السبب ). لذلك ، هناك عيوب في هذه الطريقة. حدد بنشاط طريقة منطقة النص الصينية وإرفاقها لاحقًا.
3) قد يعرف مستخدمو iPhone أن الضغط على المنطقة الفارغة حول النص لفترة طويلة في دائرة نصية معينة ، سيقوم Safari تلقائيًا بتحديد النص في الدائرة الانتخابية (يجب وضع النص المستهدف في حاوية كتلة DIV مستقلة). استنادًا إلى هذه الميزة ، استخدم هامش CSS لتعديلها. بعد الاختبار ، بغض النظر عن منصات Android و iOS ، فإن متصفح النظام الذي يأتي مع الهواتف المحمولة متوافق. أما بالنسبة للمنتجات المحمولة من الشركات المصنعة الأخرى مثل متصفح UC ومتصفح Baidu ، نظرًا لوجود آليات مختلفة ، يمكنهم فقط استخدام وظيفة النسخ المتماثل المجانية التي توفرها قوائم المتصفح هذه.
لذلك ، قمت بدمج الاتجاه الثاني والثالث ، باستخدام حدث Taphold في JQuery Mobile لمحاكاة نسخة من نظام الهاتف المحمول لعملية Text Longtap. دعنا نذكر أن الأخطاء المتوافقة مع Taphold لن يتم إرفاقها بالحل بالتفصيل هنا.
ها هي الحل الخاص بي. الرمز المحدد كما يلي:
رمز HTML:
<div class = para requirement> <div class = tips tips-t> 1. يجب عليك تنزيله لأول مرة قبل أن يسري <br/> 2. class = cparea> <div class = kwd id = kwd> <span> Master of the Kingdoms Three Yanyi Mobile Phone Optimization </span> </viv> </viv> <div class = cparea> <span class = kdes> < B> ★ </b> اضغط لفترة طويلة على الإطار المنقط ، نسخ الكلمات الرئيسية </span> </viv> <a href = https: // iTunesappleCom/cn/data-Role = button class = download> انتقل إلى appstore للبحث والبحث تنزيل </a> </viv>
رمز JavaScript:
<script type = text/javaScript> $ (#kwd) bind (taphold ، function () {// لا يدعم iPhone/iTouch/ipad safari var doc = docum ، text = docgetElementById (kwd) ، النطاق ، الاختيار ؛ إذا ( DocbodyCteTextrange) ) ؛رمز CSS المفتاح:
CPAREA {text-align ؛ 1875em ؛ #212121 ؛ملاحظة: الهامش هنا: 2EM هو تحقيق وظيفة الضغط الطويلة للضغط الطويل لمتصفح Safari. هذا 2EM. في النهاية ، لا يتوافق بصريًا مع رسم التصميم فحسب ، بل يحقق أيضًا قائمة نظام تحفيز طويل الضغط.
أخيرًا ، أضف الطريقة الكاملة لدعم Safari:
$ (#kwd) .bind (taphold ، function () {var doc = documen ، text = docgetElementById (kwd) ، range ، select ؛ if (docbodyCreatexRange) {// ie range = documentBodyCreateStrange () ؛ rangemovetoelementtext (text) ؛ rangeselect () ؛ Support TextContent Makes (0 ، TextFirstChildTextLength ، 0 ، TextFirstChild) ؛ }) ؛ما سبق هو كل محتويات هذا المقال.