JS and HTML DIV - TAB KEY

Question

JS and HTML DIV - TAB KEY

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Good,

I want to make a Genre of ScoreBoard as seen in the games, but for Site ...

If the person Clicking TAB, a table or a div # specifies ...

How do I do this?

php javascript css

asked by anonymous 10.07.2017 / 16:26

2 answers

jQuery doubt all elements are affected by function Update BD after entering record

score 2 · Answer 1

Here is an example of this behavior. I used the modal of the boostrap to demonstrate and listen to the event of when a key is pressed and when it is released. The code keyCode 9 represents the TAB, so we are listening to the events and when the TAB is pressed, it shows the modal, when you release the TAB, it 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><scriptsrc="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>

score 0 · Answer 2

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

e.keycode == 13

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

Why 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 for better understanding I changed the enter key.

In this link you will find all keycodes on the keyboard.

To work with the tab, simply change the 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>