إتقان التركيز على النموذج باستخدام جافا سكريبت

يُعدّ تركيز عناصر نموذج HTML —وضع المؤشر داخل عنصر لتمكين إدخال المستخدم الفوري— جانبًا بالغ الأهمية في تطوير الويب. تحسّن هذه التقنية تجربة المستخدم بشكل كبير من خلال تحديد الحقول مسبقًا أو توجيه المستخدمين بسلاسة عبر النماذج. توفر جافا سكريبت طريقة مباشرة لتحقيق ذلك.

يُفصّل هذا الدليل كيفية تعيين التركيز على عناصر نموذج HTML المختلفة، بما يضمن إمكانية الوصول والمتانة.

جدول المحتويات

• تعيين التركيز على عناصر الإدخال
• تعيين التركيز على عناصر منطقة النص
• تعيين التركيز على عناصر الاختيار
• أفضل الممارسات ومعالجة الأخطاء

تعيين التركيز على عناصر الإدخال

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

بالنسبة لحقل إدخال برقم معرف “firstName”:


<input type="text" id="firstName" placeholder="أدخل اسمك الأول">


استخدم جافا سكريبت هذا:


document.getElementById("firstName").focus();


يختار هذا العنصر حسب المعرف ويُطبّق focus(). ضع جافا سكريبت هذا داخل علامة <script> أو ملف `.js` مرتبط. قم بتشغيله عند تحميل الصفحة أو استجابةً لأفعال المستخدم (مثل نقرات الأزرار).

مثال مع زر:


<input type="text" id="firstName" placeholder="أدخل اسمك الأول">
<button onclick="document.getElementById('firstName').focus();">ركز على الاسم الأول</button>


تعيين التركيز على عناصر منطقة النص

تستخدم مناطق النص (لإدخال نص متعدد الأسطر) نفس طريقة focus() مثل حقول الإدخال.


<textarea id="message" placeholder="أدخل رسالتك"></textarea>


جافا سكريبت:


document.getElementById("message").focus();


هذا يضع المؤشر داخل منطقة النص برقم معرف “message”.

تعيين التركيز على عناصر الاختيار

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


<select id="country">
<option value="">اختر الدولة</option>
<option value="us">الولايات المتحدة الأمريكية</option>
<option value="ca">كندا</option>
</select>


جافا سكريبت:


document.getElementById("country").focus();


هذا ينشط مربع الاختيار، مما يسمح بالتفاعل باستخدام مفاتيح الأسهم أو الماوس.

أفضل الممارسات ومعالجة الأخطاء

إمكانية الوصول: يجب ألا يُعيق التركيز البرمجي تجربة المستخدم أو ينتهك إرشادات إمكانية الوصول. تجنب التركيز التلقائي على العناصر التي قد تُربك المستخدمين.

معالجة الأخطاء: تحقق دائمًا من وجود العنصر قبل استدعاء focus() لمنع الأخطاء:


const element = document.getElementById("firstName");
if (element) {
element.focus();
} else {
console.error("لم يتم العثور على العنصر برقم معرف 'firstName'.");
}


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