Блог

Главная - Вопросы по программированию - Веб-доступность: Ввод необходимо проверять с нажатой клавишей ввода на клавиатуре

Веб-доступность: Ввод необходимо проверять с нажатой клавишей ввода на клавиатуре

#java #html #jquery #css #web

#java #HTML #jquery #css #веб

Вопрос:

Я создал аккордеон с чистым CSS, и он расширяется при щелчке мышью. Но когда я перехожу к этому аккордеону с помощью вкладки клавиатуры и нажимаю клавишу Ввода, аккордеон не расширяется. Я хочу открыть аккордеон нажатием клавиши ввода. код ниже

 <div class="sc-accordion">
      <input class="sc-accordion__input" type="checkbox" id="one"/>
      <label class="sc-accordion__label" for="one">Accordion Heading</label>
      <div class="sc-accordion__content">
        Accordion Content
      </div>
</div>

Ответ №1:

 $(document).on('keypress', 'input', function(e) {
  $(this).prop("checked",!($(this).is(':checked')));
  if(e.keyCode == 13 amp;amp; e.target.type !== 'submit') {
    $(".sc-accordion__content").toggle();
  }
});  
 .sc-accordion__content{
  display:none;
}
p{
  color:#666;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Please try both enter both TAB and ENTER</p>

<div class="sc-accordion">
    <input class="sc-accordion__input" type="checkbox" id="one"/>
    <label class="sc-accordion__label" for="one">Accordion Heading</label>
    <div class="sc-accordion__content">
      Accordion Content
    </div>
</div>