freeCodeCamp

5.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7790367417b2b2512ab1	Use tabindex to Specify the Order of Keyboard Focus for Several Elements	0	https://scrimba.com/c/cmzRRcb	Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов

Description

tabindex атрибут также определяет точный порядок вкладок элементов. Это достигается, когда значение атрибута установлено как положительное число, равное 1 или выше. Установка tabindex = "1" сначала приведет фокусировку клавиатуры на этот элемент. Затем он перемещается по последовательности указанных значений tabindex (2, 3 и т.д.), прежде чем перейти к настройкам по умолчанию и tabindex = "0" элементам. Важно отметить, что когда порядок табуляции задан таким образом, он переопределяет порядок по умолчанию (который использует источник HTML). Это может смутить пользователей, которые ожидают начать навигацию в верхней части страницы. Этот метод может быть необходим в некоторых случаях, но с точки зрения доступности, будьте аккуратны с его применением. Вот пример: <div tabindex="1">Я получаю фокус клавиатуры, и я получаю его первым!</div> <div tabindex="2">Я получаю фокус клавиатуры, и я получаю его вторым!</div>

Instructions

Camper Cat имеет поле поиска на странице Вдохновляющие цитаты, которое он планирует позиционировать в верхнем правом углу с помощью CSS. Он хочет ввести input и представить элементы управления формой input как первые два элемента в порядке табуляции. Добавьте атрибут tabindex, со значением «1» в поиск input и атрибут tabindex со значением «2», в отправляемый input.

Tests

tests:
  - text: 'Ваш код должен добавить к тегу <code>input</code> атрибут <code>tabindex</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> в тег submit <code>input</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>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>input</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

5.1 KiB Raw Blame History Unescape Escape