لإنشاء مشاريع في الوقت الفعلي مثل الاشتراك في النشرة الإخبارية، ونماذج الاتصال، ونماذج الخروج، وتسجيلات دخول المستخدمين، ' بريد إلكتروني ' الحقل مطلوب. يجب على المستخدم إدخال بريده الإلكتروني لمواصلة العملية أو بدءها وكذلك لتسجيل الدخول إلى حسابه. ولهذا الغرض، يجب على المستخدم تقديم تسجيل دخول أو تسجيل عبر البريد في كل مرة، مما يجعل تجربة المستخدم سيئة. تم حل هذه المشكلة بمساعدة خاصية الإكمال التلقائي JavaScript HTML DOM.
تشرح هذه المدونة الإجراء الخاص بالتعامل مع خاصية الإكمال التلقائي للبريد الإلكتروني لإدخال HTML DOM في JavaScript.
كيفية التعامل مع خاصية الإكمال التلقائي للبريد الإلكتروني بتنسيق HTML DOM؟
خاصية الإكمال التلقائي لإدخال HTML DOM ' بريد إلكتروني '، يوفر قائمة تحتوي على أحدث البيانات التي تم إدراجها مسبقًا في ' بريد إلكتروني ' مجال. يسمح للمستخدم باختيار بريده الإلكتروني من القائمة إذا كان متاحًا تلقائيًا.
بناء الجملة
تم توضيح بناء جملة خاصية الإكمال التلقائي للبريد الإلكتروني لإدخال DOM أدناه:
emailObj. الإكمال التلقائي = 'تشغيل|إيقاف'
يقوم بناء الجملة أعلاه بتعيين وإزالة خاصية الإكمال التلقائي عبر عنصر emailObj.
emailObj. الإكمال التلقائي
يسترد بناء الجملة هذا قيمة ' الإكمال التلقائي '' لمعرفة ما إذا كانت هذه الخاصية ممكّنة أم لا.
لنحصل على برنامج JavaScript لخاصية الإكمال التلقائي
مثال: تمكين وتعطيل واسترجاع قيمة خاصية الإكمال التلقائي
في هذا المثال، سيتم تعطيل خاصية الإكمال التلقائي، وتمكينها عن طريق تعيين هذه الخاصية على ' على ' و ' عن ' على التوالى. بعد ذلك، سيتم استرداد القيمة الحالية لخاصية الإكمال التلقائي:
< جسم >< مركز >
< h1 أسلوب = 'اللون: أزرق كاديت؛' > لينكس < / h1 >
بريد إلكتروني: < مدخل يكتب = 'بريد إلكتروني' بطاقة تعريف = 'البريد التجريبي' >
< ر >
< ر >
< زر عند النقر = 'المعطل ()' > معطل < / زر >
< زر عند النقر = 'التمكين ()' > التمكين < / زر >
< h3 بطاقة تعريف = 'هدف' > < / h3 >
< زر عند النقر = 'فاحص()' > فاحص < / زر >
< / مركز >
< النصي >
وظيفة تعطيل () {
document.getElementById('demoEmail').الإكمال التلقائي = 'off';
}
تمكين الوظيفة () {
document.getElementById('demoEmail').الإكمال التلقائي = 'on';
}
مدقق الوظيفة () {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / النصي >
< / جسم >
شرح كتلة التعليمات البرمجية أعلاه مذكور أدناه:
- لأول مرة ' مدخل 'يتم إنشاء العنصر بنوع السمة' بريد إلكتروني ' لقبول وإجراء التحقق الأساسي للتأكد من أن البيانات المدخلة هي بريد إلكتروني.
- بعد ذلك، يتم إنشاء ثلاثة عناصر زر والتي تستدعي ' Disabler() و'Enabler()' و'Checker()' ' المهام.
- الآن قم بتعريف ' معطل ()' عن طريق تحديد ' مدخل 'العنصر باستخدام معرفه وتعيين قيمة' عن 'لأنها' الإكمال التلقائي ' ملكية.
- في ال ' التمكين ()' ، قم بتطبيق نفس ' الإكمال التلقائي 'خاصية ولكن الآن قم بتعيين قيمة لها' على '.
- وبعد ذلك قم بتحديد ' فاحص ()' بإضافة '' فقط الإكمال التلقائي 'بجوار مرجع عنصر الإدخال وتخزينه في المتغير' ي '.
- وفي النهاية عرض قيمة هذا المتغير “ ي ' على صفحة الويب باستخدام ' InnerHTML ' ملكية.
يظهر الإخراج بعد تجميع ما سبق على النحو التالي:
يُظهر الإخراج أنه تم تعطيل وتمكين خاصية الإكمال التلقائي للبريد الإلكتروني المُدخل. يتم أيضًا استرداد قيمتها وعرضها على صفحة الويب.
خاتمة
تقوم خاصية الإكمال التلقائي للبريد الإلكتروني بإدخال HTML DOM تلقائيًا بإنشاء قائمة تحتوي على القيم التي أدخلها المستخدم مسبقًا في حقل البريد الإلكتروني. بحيث يمكن للمستخدم الاختيار بسهولة من البيانات التي تم إدخالها مسبقًا وبالتالي تعزيز تجربة المستخدم. يتم تعيين هذه الخاصية عندما تكون قيمة ' على ' يتم تعيينها لها وتعطيلها عندما تكون قيمة ' عن 'تم تمريره. لقد أوضحت هذه المدونة خاصية الإكمال التلقائي للبريد الإلكتروني لإدخال DOM بواسطة JavaScript.