JS and HTML DIV - TAB KEY

Question

Good,

I want to make a kind of Scoreboard as seen in the games, but for Website...

If the person Click TAB, a specific tab or div#appears...

How do I do that?

Answer 1

Follow an example of this behavior. I used the boostrap modal to demonstrate and listen to the event when a key is pressed and when it is released. The keycode 9 represents the TAB, so we are listening to the events and when the TAB is pressed, it shows the modal, when to release the TAB, hides the modal.

$(function() {
  $("body").on('keydown', function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      e.preventDefault();
      $('#modal').modal('show');
    }
  });

  $("body").on('keyup', function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      e.preventDefault();
      $('#modal').modal('hide');
    }
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Clique aqui, segure TAB, depois solte o TAB.

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Título</h4>
      </div>
      <div class="modal-body">
        Dados..
      </div>
    </div>
  </div>
</div>

Answer 2

Come on, the code below detects when a certain keyboard key has been clicked.

e.keycode == 13

This line is saying that when the key enter is clicked, the function below will be executed.

Because enter and not tab?

When we click on the tab key it ends up changing the selection of the element that is on the page, so just for better understanding I changed to the enter key.

At this link you find all keyboard keycodes.

To work with tab, just change 13 to 9.

$(document).keyup(function(e) {
            if (e.keyCode == 13) {
            
              if($('.placar').css('display') == 'block')
              {
                $('.placar').css('display', 'none');
                }
                else
                {
                $('.placar').css('display', 'block');
                }
            }
        });

.placar{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='placar'>Aqui aparece o placar</div>