0

Boas,

Eu quero fazer um genero de ScoreBoard como se ve nos jogos, mas para Site...

Se a pessoa Clicar TAB, aparece uma tabla ou uma div#especifica...

Como faço isso?

2 Respostas 2

2

Segue um exemplo deste comportamento. Utilizei o modal do boostrap para demonstrar e escutando o evento de quando uma tecla é pressionada e quando é solta. O código keyCode 9 representa o TAB, então, estamos escutando os eventos e quando for o TAB pressionado, mostra o modal, quando soltar o TAB, esconde o 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>

0

Vamos la, o código abaixo detecta quando uma determinada tecla do teclado foi clicada.

e.keycode == 13

Está linha está dizendo que quando a tecla enter for clicada, a função abaixo será executada.

Porque enter e não tab?

Quando clicamos na tecla tab ela acaba mudando a seleção do elemento que está na página, então só para melhor entendimento alterei para a tecla enter.

Neste link você encontra todos os keycodes do teclado.

Para que funcione com o tab, basta alterar o 13 para 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .