freeCodeCamp

4.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7790367417b2b2512ab1	Use tabindex to Specify the Order of Keyboard Focus for Several Elements	0		استخدم tabindex لتحديد ترتيب التركيز على لوحة المفاتيح للعديد من العناصر

Description

tabindex السمة tabindex أيضًا ترتيب علامات التبويب الدقيق للعناصر. يتحقق ذلك عندما يتم تعيين قيمة السمة إلى عدد موجب من 1 أو أعلى. سيؤدي تعيين tabindex = "1" إلى تركيز لوحة المفاتيح على هذا العنصر أولاً. ثم يمر عبر تسلسل قيم tabindex المحددة (2 ، 3 ، وما إلى ذلك) ، قبل الانتقال إلى tabindex="0" الافتراضية و tabindex="0" . من المهم ملاحظة أنه عند تعيين ترتيب علامة التبويب بهذه الطريقة ، فإنه يتجاوز الترتيب الافتراضي (الذي يستخدم مصدر HTML). قد يؤدي ذلك إلى إرباك المستخدمين الذين يتوقعون بدء التنقل من أعلى الصفحة. قد تكون هذه التقنية ضرورية في بعض الظروف ، ولكن فيما يتعلق بإمكانية الوصول ، يجب توخي الحذر قبل تطبيقها. إليك مثال على ذلك: <div tabindex="1">I get keyboard focus, and I get it first!</div> <div tabindex="2">I get keyboard focus, and I get it second!</div>

Instructions

يحتوي "كامبر كات" على حقل بحث في صفحة "اقتباسات ملهمة" التي ينوي وضعها في الزاوية اليمنى العليا باستخدام CSS. يريد input البحث وإرسال عناصر تحكم نموذج input ليكون أول عنصرين في ترتيب الجدولة. إضافة سمة tabindex مضبوطة على "1" إلى input البحث ، tabindex مضبوطة على "2" إلى input .

Tests

tests:
  - text: يجب أن تضيف الكود الخاص بك سمة <code>tabindex</code> إلى علامة <code>input</code> البحث.
    testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
  - text: يجب أن تضيف الكود الخاص بك سمة <code>tabindex</code> إلى علامة <code>input</code> <code>tabindex</code> .
    testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
  - text: يجب أن تحدد <code>tabindex</code> سمة <code>tabindex</code> في علامة <code>input</code> البحث إلى قيمة 1.
    testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
  - text: يجب أن تحدد <code>tabindex</code> سمة <code>tabindex</code> على علامة <code>input</code> <code>tabindex</code> إلى قيمة 2.
    testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'

Challenge Seed

<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>


    <input type="search" name="search" id="search">
    <input type="submit" name="submit" value="Submit" id="submit">


  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

4.6 KiB Raw Blame History