html يحل مشكلة تذكر المتصفح لمربع إدخال كلمة المرور

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

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

لقد واجهت بعض المزالق أثناء عملية الحل، وإليك بعض الملاحظات:

استخدم سمة HTML الإكمال التلقائي = "إيقاف"

نظرًا لأنه يتم تنفيذ ميزة الملء التلقائي بواسطة المتصفح نفسه، لم تتم كتابة سمة الإكمال التلقائي في مواصفات W3C. سوف تتجاهل العديد من المتصفحات هذه السمة ببساطة. لا يمكن تعطيل الملء التلقائي.

من الطبيعي التفكير في طريقة لاستخدام js لتعيين قيمة الإدخال فارغة عند تحميل الصفحة، ولكن الملء التلقائي للمتصفح يتم ملؤه بالفعل بعد تنفيذ js. . . بعد استخدام js لتعيين قيمة الإدخال لتكون فارغة، يقوم المتصفح بملء الإدخال تلقائيًا، مما لا يمكنه حل المشكلة.

أضف <input type="password"/>

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

<!-- مدخلات إضافية -->
<نوع الإدخال = "كلمة المرور" نمط = "العرض: لا شيء"/>
<!-- الإدخال الأصلي -->
<نوع الإدخال = "كلمة المرور"/>

إضافة النموذج

تحل هذه الطريقة مشكلة الملء التلقائي في Safari مقارنةً بالطريقة المذكورة أعلاه. ولكنه لا يعمل في بعض الإصدارات الأعلى من Chrome. (بعد الاختبار، يعمل Chrome 46.0، ويفشل Chrome 47.0)

<!-- نموذج وإدخال إضافي -->
<نمط النموذج = "العرض: لا شيء">
  <نوع الإدخال = "كلمة المرور"/>
</النموذج>
<!-- الإدخال الأصلي -->
<نوع الإدخال = "كلمة المرور"/>

الحل النهائي

يجمع هذا الحل بين الطريقتين المذكورتين أعلاه، ويحل أخيرًا مشكلة الملء التلقائي في Chrome 47.0.

<!--محتوى إضافي-->
<نمط النموذج = "العرض: لا شيء">
  <نوع الإدخال = "كلمة المرور"/>
</النموذج>
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
<!-- الإدخال الأصلي -->
<نوع الإدخال = "كلمة المرور"/>

ما يجب ملاحظته في هذه الطريقة هو أنه لا يمكن تعيين الإدخال الذي هو نفس جيل الإدخال الهدف على العرض: لا شيء، إذا تم تعيينه، فسيتم ملؤه تلقائيًا في Chrome 47.0، لذلك يمكنك فقط استخدام وسائل أخرى لإخفاء هذا الإدخال.

ملخص

بعد استخدام الحل الأخير، يعمل بشكل جيد في المتصفحات المختلفة، ولم يتم العثور على تعبئة تلقائية في الوقت الحالي. من المؤكد أن مشكلات التوافق مع الواجهة الأمامية كانت دائمًا أمرًا مثيرًا للاشمئزاز. .

بهذا نختتم هذه المقالة حول كيفية حل HTML لمشكلة تذكر مربعات إدخال كلمة المرور في المتصفحات. لمزيد من المعلومات حول تذكر مربعات إدخال كلمة المرور في HTML، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة أدناه downcodes.com المزيد في المستقبل!