ربما هذه هي حلول توافق لوحة المفاتيح الناعمة H5 التي تريدها (ملخص)

لقد كنت أعمل في مشروع دردشة H5 مؤخرًا، وواجهت واحدة من أكبر المزالق: يتم التركيز على مربع الإدخال، وتنبثق لوحة المفاتيح الناعمة، ويلزم امتصاص مربع الإدخال (أو دفعه) في طريقة الإدخال صندوق. المتطلبات واضحة جدًا وتبدو بسيطة، لكنها في الواقع ليست كذلك. وبعد تجربة بعض النماذج وجدنا أن هناك المشاكل التالية بشكل رئيسي:

• في نظامي التشغيل Android وIOS، تم التعرف على وجود اختلافات في الحالة العلوية والسفلية للوحة المفاتيح الناعمة، وأن عرض الويب للصفحة يتصرف بشكل مختلف.
• في نظام التشغيل IOS12، الإصدار 6.7.4 والإصدارات الأحدث من WeChat، يتم التركيز على مربع الإدخال، وتنبثق لوحة المفاتيح، ويتم تمرير الصفحة (عرض الويب) لأعلى ككل. عندما يتم سحب لوحة المفاتيح، فإنها لا تعود إلى موضعها الأصلي، مما يسبب أن يكون الموضع الأصلي للوحة المفاتيح فارغًا.
• على نظام التشغيل iOS، عند استخدام طرق إدخال تابعة لجهات خارجية، يكون هناك انحراف في حساب الارتفاع، مما يؤدي إلى ظهور بعض طرق الإدخال وحظر مربع الإدخال جزئيًا.
• حتى إذا كنت تستخدم بعض تقنيات التشغيل على بعض المتصفحات، فسيظل مربع الإدخال محظورًا بواسطة طريقة الإدخال.

دعونا نستكشف حلول المشاكل المذكورة أعلاه واحدة تلو الأخرى.

من المهم معرفة ما إذا كانت لوحة المفاتيح الناعمة لأعلى أم لأسفل، ويجب أن تعتمد معالجة التوافق اللاحقة على ذلك. ومع ذلك، لا يراقب H5 الأحداث الأصلية للوحة المفاتيح الإلكترونية بشكل مباشر، بل يمكنه فقط مراقبة أداء الجوانب الأخرى من الصفحة بشكل غير مباشر عن طريق ظهور لوحة المفاتيح الإلكترونية أو سحبها، مما يؤدي إلى إنقاذ البلاد. علاوة على ذلك، يختلف الأداء على نظامي iOS وAndroid.

على نظام التشغيل iOS، عندما يتم التركيز على مربع الإدخال (الإدخال أو منطقة النص أو النص المنسق)، تنبثق لوحة المفاتيح، أو لا يتم ضغط الصفحة (عرض الويب)، أو لا يتغير الارتفاع (الارتفاع)، ولكن الصفحة (عرض الويب) كما هي يتم التمرير بالكامل لأعلى والحد الأقصى لارتفاع التمرير (scrollTop) هو ارتفاع لوحة المفاتيح الناعمة.

وبالمثل، في نظام Android، يتم التركيز على مربع الإدخال وتنبثق لوحة المفاتيح، لكن ارتفاع الصفحة (عرض الويب) سيتغير بشكل عام، الارتفاع هو ارتفاع المنطقة المرئية (الارتفاع الأصلي مطروحًا منه ارتفاع لوحة المفاتيح الناعمة). )، باستثناء أن محتوى الصفحة الذي يتم توسيعه يمكن أن يؤدي إلى التمرير، لكن عرض الويب نفسه لا يمكنه التمرير.

عندما يتم تشغيل زر السحب الموجود على لوحة المفاتيح الإلكترونية أو منطقة الصفحة خارج مربع الإدخال، يفقد مربع الإدخال التركيز وتتراجع لوحة المفاتيح الإلكترونية.

عند تشغيل منطقة خارج صندوق الإدخال، يفقد صندوق الإدخال التركيز ويتم سحب لوحة المفاتيح الإلكترونية. ومع ذلك، عند تشغيل زر السحب الموجود على لوحة المفاتيح، لن يفقد مربع الإدخال التركيز، وسيتم سحب لوحة المفاتيح الإلكترونية أيضًا.

استنادًا إلى الأداء المختلف المذكور أعلاه للنوافذ المنبثقة والطي للوحة المفاتيح على نظامي التشغيل iOS وAndroid، يمكننا إجراء المعالجة التالية بشكل منفصل لمراقبة النوافذ المنبثقة والانهيار للوحة المفاتيح الناعمة:

• على نظام التشغيل iOS، استمع إلى حدث التركيز لمربع الإدخال لتعرف أن لوحة المفاتيح الناعمة تنبثق، واستمع إلى حدث التمويه لمربع الإدخال لمعرفة أن لوحة المفاتيح الناعمة تُغلق.
• على نظام Android، سيتغير ارتفاع عرض الويب الذي يتم مراقبته. عندما يصبح الارتفاع أصغر، ستظهر لوحة المفاتيح الناعمة، وإلا سيتم إغلاق لوحة المفاتيح الناعمة.

 // تحديد نوع الجهاز var القاضيDeviceType = function () { var ua = window.navigator.userAgent.toLocaleLowerCase(); var isIOS = /iphone|ipad|ipod/.test(ua); ( ua); return { isIOS: isIOS, isAndroid: isAndroid }}()// استمع إلى وظيفة الأحداث المنبثقة والطي للوحة المفاتيح في مربع الإدخال learnKeybord($input) { if (judgeDeviceType.isIOS) { // تنبثق لوحة مفاتيح IOS: يتم التركيز على مربعات الإدخال IOS وAndroid وتنبثق لوحة المفاتيح $input.addEventListener('focus', function () { console.log(' لوحة مفاتيح IOS تنبثق! '); // العملية بعد ظهور لوحة مفاتيح IOS}، خطأ) // تتراجع لوحة مفاتيح IOS: IOS إذا نقرت خارج مربع الإدخال أو نقرت على زر التراجع، فسيفقد مربع الإدخال التركيز وستتراجع لوحة المفاتيح $input.addEventListener('blur', () => { console.log('تم سحب لوحة مفاتيح IOS!') // العملية بعد طي لوحة مفاتيح IOS }) } // لوحة مفاتيح Andriod مطوية: عندما تنبثق لوحة مفاتيح Andriod أو تُطوى، سيتغير ارتفاع الصفحة، وبناءً على ذلك، يتم طي لوحة المفاتيح if (judgeDeviceType.isAndroid) { var OriginHeight = document.documentElement.clientHeight ||. document.body.clientHeight; window.addEventListener('resize', function () { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (originHeight < resizeHeight) { console.log ("تم وضع لوحة مفاتيح Android بعيدًا!")؛ // العملية بعد وضع لوحة مفاتيح Android} else { console.log('تنبثق لوحة مفاتيح Android! '); // العملية بعد ظهور لوحة مفاتيح Android} OriginHeight = resizeHeight }, false) }}var $inputs = document.querySelectorAll('.input');for (var i = 0; i < $inputs.length; i++) {استماعKeybord($inputs[i]);}

في بعض الأحيان، سنقوم بإنشاء نموذج إدخال يحتوي على العديد من عناصر الإدخال. يحصل مربع الإدخال على التركيز وتنبثق لوحة المفاتيح الإلكترونية. عندما يكون مربع الإدخال موجودًا في الجزء السفلي من الصفحة، على نظام iOS، سيتم عرض عرض الويب بالكامل لمسافة معينة بحيث يكون مربع الإدخال الذي تم التركيز عليه تلقائيًا في المنطقة المرئية، ومع ذلك، لن يكون هذا هو الحال على Android سيؤدي ذلك إلى تغيير ارتفاع الصفحة فقط، دون التمرير إلى العنصر الذي يتم التركيز عليه حاليًا في المنطقة المرئية.

نظرًا لأنه تم تنفيذ ما سبق لمراقبة النوافذ المنبثقة والتراجع عن لوحات مفاتيح IOS وAndroid، هنا، ما عليك سوى تمرير (scrollIntoView()) عنصر التركيز إلى المنطقة المرئية بعد ظهور لوحة مفاتيح Android. لرؤية التأثير يمكنك الضغط هنا.

 // احصل على عنصر التركيز وانتقل إلى المنطقة المرئية function activeElementScrollIntoView(activeElement, Delay) { vareditable = activeElement.getAttribute('contenteditable') // لا يتم تمرير مربع الإدخال أو منطقة النص أو النص المنسق إلى المنطقة المرئية بعد الحصول عليه منطقة التركيز إذا (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || قابل للتحرير === '' || قابل للتحرير) { setTimeout(function () { activeElement.scrollIntoView(); }، تأخير) }}// ...// تشغيل activeElementScrollIntoView($input, 1000);// ... بعد ظهور لوحة مفاتيح Android

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

 <p>الرجاء إدخال رقم هاتفك المحمول</p><input type=tel novalidate=novalidate Pattern=[0-9]* class=input> 

• type=tel هي إحدى سمات HTML5، مما يشير إلى أن نوع مربع الإدخال هو رقم هاتف، وهو يعمل بشكل مشابه على نظامي التشغيل Android وIOS. يحتوي كلاهما على لوحات مفاتيح رقمية، ولكن هناك أيضًا أحرف، وهي زائدة عن الحاجة قليلاً.
• النمط=[0-9]، يتم استخدام النمط للتحقق من المحتوى المُدخل في النموذج. عادةً ما يكون لسمة النوع في HTML5، مثل البريد الإلكتروني والهاتف والرقم وفئة البيانات وعنوان url وما إلى ذلك، تحقق بسيط من تنسيق البيانات. وظيفة، بالإضافة إلى النمط، والتحقق من الجزء الأمامي أبسط وأكثر كفاءة. في نظام التشغيل IOS، يمكن فقط لـ [0-9]/* استدعاء لوحة المفاتيح الرقمية ذات المربعات التسعة، و/d غير صالح، ويمكن لنظام Android 4.4 أو الإصدارات الأقدم (بما في ذلك نواة X5) استدعاء لوحة المفاتيح الرقمية.
• novalidate=novalidate، تنص سمة novalidate على أنه لن يتم التحقق من النموذج عند إرساله نظرًا لأن توافق التحقق من النمط ليس جيدًا، فلا يمكنك السماح بالتحقق منه، والسماح له فقط باستحضار لوحة المفاتيح الرقمية النقية. سيتم تنفيذ أعمال التحقق بواسطة js.

إذا كنت تستخدم إصدار IOS12 وV6.7.4+ من متصفح WeChat لفتح العرض التوضيحي لإدخال النموذج أعلاه، فسوف تتفاجأ عندما تجد أنه بعد سحب لوحة المفاتيح، لا تعود الصفحة التي تم تمريرها لأعلى في الأصل إلى الموضع السفلي، مما يتسبب في لوحة المفاتيح الأصلية لترتد موضع البداية فارغ.

في الواقع، يعد هذا خطأ من Apple في نظام التشغيل iOS وسيظهر على جميع الأجهزة التي تعمل بنظام التشغيل IOS12 والمزودة بـ Xcode10. لقد قدم WeChat حلاً رسميًا، ما عليك سوى تمرير الصفحة (عرض الويب) مرة أخرى إلى الموضع السفلي للنافذة (موضع ارتفاع العميل) بعد إغلاق لوحة المفاتيح الناعمة. يمكن النقر هنا على العرض التوضيحي لإدخال النموذج الذي تم إصلاحه أعلاه

 console.log('تم وضع لوحة مفاتيح IOS بعيدًا!');// سيُظهر إصدار متصفح WeChat 6.7.4+IOS12 أنه بعد وضع لوحة المفاتيح بعيدًا، يتم دفع العرض لأعلى ولكن ليس لأسفل var wechatInfo = window.navigator.userAgent .match( /MicroMessenger//([/d/.]+)/i);if (!wechatInfo) return;var wechatVersion = wechatInfo[1];var version = (navigator.appVersion).match(/OS (/d+)_(/d+)_?(/d+)?/);if (+wechatVersion.replace(//./g, '') >= 674 && +version[1] >= 12) { window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));}

بعد أن قلنا الكثير أعلاه، في الواقع، تم ملء أكثر من نصف عيوب مربع إدخال الدردشة H5. بعد ذلك، دعونا نلقي نظرة على بنية HTML الأساسية لمربع إدخال الدردشة.

 <div class=chat__content> <div> <p>بعض محتوى الدردشة 1</p> </div> <!--حذف آلاف الأسطر من محتوى الدردشة-></div><div class=input__content> <div class =input contenteditable=true></div> <button>إرسال</button></div>

أسلوب

 /* حذف بعض الأنماط */.chat__content { height: calc(100% - 40px); Margin-bottom: 40px; الموضع: اليسار المطلق: 0؛ اليمين: 0؛ محاذاة العناصر: المركز؛}/* حذف بعض الأنماط*/

إنه أمر بسيط للغاية، ما عليك سوى تقسيم منطقة المحتوى ومنطقة الإدخال بشكل كامل وفقًا للطريقة التوضيحية لإدخال النموذج أعلاه، صحيح أن معظم متصفحات Android تعمل بشكل جيد، ولكن تم إجراء الاختبار على متصفح UC بالنسبة إلى طريقة الإدخال الأصلية وأساليب الإدخال التابعة لجهات خارجية (مثل طريقة إدخال Sogou)، سيتم حظر مربع الإدخال بالكامل لمتصفح QQ أو متصفح WeChat، مع طريقة إدخال تابعة لجهة خارجية، سيتم حظر مربع الإدخال إلى النصف؛ باستخدام متصفح Baidu، باستخدام طريقة إدخال تابعة لجهة خارجية، سيتم حظر مربع الإدخال، كما سيتم تغطيته بالكامل. لعرض التأثير، يمكنك زيارة هنا في المتصفح المناسب.

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

أما بالنسبة لطريقة إدخال الطرف الثالث، فمن المتوقع أن يكون موضع التمرير الأولي لعرض الويب غير صحيح بسبب حساب الارتفاع غير الصحيح بعد ظهور لوحة طريقة الإدخال. في الواقع، هاتان النقطتان ناتجتان عن عدم تمرير عرض الويب في مكانه. بعد أن تنبثق لوحة المفاتيح الناعمة، يمكن تمرير عنصر التركيز إلى المنطقة المرئية مرة أخرى، مما يجبر عرض الويب على التحرك في مكانه.

 console.log('تنبثق لوحة مفاتيح Android!');activeElementScrollIntoView($input, 1000);

على متصفح Xiaomi لنظام التشغيل Android، بعد تطبيق الحل أعلاه، وجدت أن مربع إدخال الدردشة لا يزال محظورًا بإحكام، وأن التمرير (scrollIntoView) لا يزال بلا حراك. لذلك أعتقد أن السبب في ذلك هو أنه تم تمرير لوحة المفاتيح الإلكترونية إلى الأسفل، وكان ارتفاع الصفحة أكبر من ارتفاع المنطقة المرئية عندما تنبثق لوحة المفاتيح الإلكترونية. وبهذه الطريقة، لا يمكن زيادة ارتفاع الصفحة بالقوة إلا بعد تنبثق لوحة المفاتيح الناعمة بحيث يمكن عرض مربع الإدخال. بناءً على ما ورد أعلاه، فهو متوافق مع طرق الإدخال التابعة لجهات خارجية لعرض التأثير، يمكنك النقر هنا.

 // تراجع لوحة مفاتيح Android: سيتغير ارتفاع الصفحة عندما تنبثق لوحة مفاتيح Android أو تتراجع. وبناءً على ذلك، يُعرف تراجع لوحة المفاتيح if (judgeDeviceType.isAndroid) { var OriginHeight = document.documentElement.clientHeight || body.clientHeight ; window.addEventListener('resize', function () { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (originHeight < resizeHeight) { console.log("لوحة مفاتيح Android مغلقة!") // إصلاح مشكلة أن مربع الإدخال لا يزال محظورًا بواسطة طريقة الإدخال في متصفح Xiaomi if (judgeDeviceType.isMiuiBrowser) ) { document.body.style.marginBottom = '0px'; } } else { console.log('تنبثق لوحة مفاتيح Android!'); إصلاح مشكلة استمرار حظر مربع الإدخال بواسطة طريقة الإدخال في متصفح Xiaomi if (judgeDeviceType.isMiuiBrowser) { document.body.style.marginBottom = '40px' } activeElementScrollIntoView($input, 1000 } OriginHeight = resizeHeight; }، خطأ شنيع )}

أمام نهاية H5 طريق طويل مليء بالمزالق ويتطلب محاولات مستمرة. من المتطلبات الأساسية فهم اختلاف الأداء بين الصفحة المنبثقة للوحة المفاتيح الناعمة على نظامي التشغيل iOS وAndroid. والخطوة الثانية هي تمرير عنصر التركيز إلى المنطقة المرئية، وفي نفس الوقت، الاختلافات في أساليب الإدخال التابعة لجهات خارجية يجب أن تؤخذ بعض المتصفحات بعين الاعتبار.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.