Question 209902 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to do something when entering a div using the keyboard tab key

How can I ‘do something’ with jQuery when entering a div using the keyboard tab key? For example, when a user navigates using the keyboard tab button, and they enter the ‘Inside’ div in the example below, the console log doesn’t fire until the tab button is pressed a second time:

$('.inside').on('keydown', function(e) {
  if (e.keyCode === 9) {
    console.log('Inside');
  }
});
.inside {
  border: 1px solid black;
  margin: 10px;
  min-height: 300px;
  padding: 20px;
}

.outside {
  padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="outside text-center">
    <a href="">Outside Link 1</a>
    <a href="">Outside Link 2</a>
    <a href="">Outside Link 3</a>
    <a href="">Outside Link 4</a>
  </div>
  <div class="inside text-center">
    <a href="">Inside Link 1</a>
    <a href="">Inside Link 2</a>
    <a href="">Inside Link 3</a>
    <a href="">Inside Link 4</a>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Listen for the focus event on the DIV’s links and if the previous focused element is outside of the DIV, react to the event. Works with any TAB navigation direction and the mouse also.

    $('.inside a').on('focus', function(e) {
  if($(e.originalEvent.relatedTarget).parents('.inside').length){
    // focus is moved inside the div, so ignore
    return;
  }
  console.log('Inside');
  
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="outside text-center">
  <a href="">Outside Link 1</a>
  <a href="">Outside Link 2</a>
  <a href="">Outside Link 3</a>
  <a href="">Outside Link 4</a>
</div>
<div class="inside text-center">
  <a href="">Inside Link 1</a>
  <a href="">Inside Link 2</a>
  <a href="">Inside Link 3</a>
  <a href="">Inside Link 4</a>
</div>
</div>
    Login or Signup to reply.
  2. 0

    Try using:

    $('.inside').on('keyup', function(e) {
  if (e.keyCode === 9) {
    console.log('Inside');
  }
});

    Basically, when using ‘keydown’, the listener that triggers your function waits for the tab button to be pressed after the focus entered the .inside div. So, if you need the function to be triggered as soon as the focus moves to .inside div, then you can just check if tab button goes ‘up’ inside the .inside div

    UPD: if you need it to be triggered only for the first link, then something like this should work (the code a bit messy but it does what you need)

    $('.inside').on('keyup', function(e) {
  const el = document.querySelector('.inside>:first-child');
  if (e.keyCode === 9) {
    if (el === document.activeElement) {
      console.log('Inside');
    }
  }
});
    Login or Signup to reply.
  3. 0

    You should use the keyup event instead.

    Be aware that keyCode is deprecated. It is better to use key instead.

    In the example below, event.currentTarget is always the div.inside element. So we can always query down to the :first-child and compare it to the event.target.

    $('.inside').on('keyup', function({ currentTarget, key, target }) {
  if (
    key === 'Tab' &&
    $(target).get(0) === $(currentTarget).find('a:first-child').get(0)
  ) {
    console.log('Inside');
  }
});
    .inside {
  border: 1px solid black;
  margin: 10px;
  min-height: 300px;
  padding: 20px;
}

.outside {
  padding: 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="outside text-center">
    <a href="">Outside Link 1</a>
    <a href="">Outside Link 2</a>
    <a href="">Outside Link 3</a>
    <a href="">Outside Link 4</a>
  </div>
  <div class="inside text-center">
    <a href="">Inside Link 1</a>
    <a href="">Inside Link 2</a>
    <a href="">Inside Link 3</a>
    <a href="">Inside Link 4</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search