在焦点上的元素上切换类并按下 Tab 键

Question

当按下 Tab 键时信息图标都聚焦时，我目前正在尝试切换类。这是我当前工作的codepen。

HTML：

 <i class="fa fa-info-circle" id="disclaimerTooltip" tabindex="0" aria-describedby="myfield_description"></i> 

<span class="test myfield_description" role="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 </span>

JQuery:

$('#disclaimerTooltip')
  .bind('focus keypress', function(e){
  var keyCode = e.keyCode || e.which; 
  console.log(keyCode);
  if (keyCode == 9) { 
    $('.test').toggleClass('myfield_description')
  } 

})

当我进入信息图标时，我得到了 0 的键码，而不是 9。

Answer 1

这可以通过 css 而不是 js 来完成 - 我认为在很多情况下它会更好，尽管我不知道你的具体情况。

https://codepen.io/anon/pen/BJdxEW

css

.myfield_description {
  position: absolute;
  visibility: hidden;
}

i:focus .myfield_description,
i:hover  .myfield_description {
  position: static;
  visibility: visible;
}

html

<i class="fa fa-info-circle" id="disclaimerTooltip" tabindex="0" aria-describedby="myfield_description">
  <span class="test myfield_description" role="tooltip">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </span>
</i>