--- id: 587d7790367417b2b2512ab0 title: Use tabindex to Add Keyboard Focus to an Element challengeType: 0 videoUrl: '' localeTitle: استخدم tabindex إلى إضافة Keyboard Keyboard إلى عنصر --- ## Description
tabindex سمة tabindex HTML على ثلاث وظائف مميزة تتعلق بتركيز لوحة المفاتيح للعنصر. عندما يكون على علامة ، فإنه يشير إلى أنه يمكن التركيز على العنصر. تحدد القيمة (عدد صحيح موجب أو سلبي أو صفر) السلوك. تتلقى عناصر معينة ، مثل الروابط وعناصر التحكم في النموذج ، تركيز لوحة المفاتيح تلقائيًا عند قيام المستخدم بالتبويب من خلال صفحة. إنه بنفس ترتيب العناصر الموجودة في ترميز مصدر HTML. يمكن إعطاء هذه الوظيفة نفسها لعناصر أخرى ، مثل div و span و p ، بوضع سمة tabindex="0" عليها. إليك مثال: <div tabindex="0">I need keyboard focus!</div> ملاحظة
tabindex قيمة tabindex سالبة (عادة -1) إلى أن العنصر قابل للتركيز ، ولكن لا يمكن الوصول إليه عن طريق لوحة المفاتيح. يتم استخدام هذه الطريقة بشكل عام للتركيز على المحتوى برمجيًا (مثلما يحدث عندما يتم تنشيط div المستخدم في نافذة منبثقة) ، وهو خارج نطاق هذه التحديات.
## Instructions
أنشأ Camper Cat استبيانًا جديدًا لجمع معلومات حول مستخدميه. وهو يعلم أن حقول الإدخال تحصل تلقائيًا على تركيز لوحة المفاتيح ، ولكنه يريد التأكد من أن مستخدمي لوحة المفاتيح يتوقفون مؤقتًا عند استخدام الإرشادات أثناء الجدولة خلال العناصر. إضافة سمة tabindex إلى علامة p وتعيين قيمتها إلى "0". المكافأة - باستخدام tabindex تمكّن أيضًا tabindex CSS الزائفة :focus على العمل على علامة p .
## Tests
```yml tests: - text: يجب أن تضيف التعليمات البرمجية الخاصة بك سمة tabindex إلى علامة p التي تحتوي على إرشادات النموذج. testString: 'assert($("p").attr("tabindex"), "Your code should add a tabindex attribute to the p tag that holds the form instructions.");' - text: يجب أن تقوم التعليمات البرمجية بتعيين السمة tabindex على علامة p إلى قيمة 0. testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the tabindex attribute on the p tag to a value of 0.");' ```
## Challenge Seed
```html

Ninja Survey

Instructions: Fill in ALL your information then click Submit


What level ninja are you?


Select your favorite weapons:




```
## Solution
```js // solution required ```