Ir para conteúdo
Fórum Script Brasil
  • 0

andar com as setas pela table


ratamiette

Pergunta

2 respostass a esta questão

Posts Recomendados

  • 0

Criei um código utilizando botões. Não sei se as células da tabela recebem foco. Se isso acontece, você pode utilizar a ideia do script abaixo. Caso contrário você deve pesquisar outra solução.

<!DOCTYPE html>
<html>
    <head>
        <title>Navegar entre botões</title>
        <meta charset="utf-8" />
        <style>
        button {
            border: 1px solid #000;
            padding: 30px;
        }
        button[autofocus] {
            border: 3px solid #ff0000;
        }
        </style>
    </head>
    <body>
        <button autofocus="autofocus">1</button><button>2</button><button>3</button>
        <script>
        var buttons = document.getElementsByTagName('button'),
            i,
            sibling,
            bind;

        bind = function (evt) {
            if (evt.keyCode === 37) {
                sibling = this.previousSibling;

                if (sibling && sibling.nodeType === 1) {
                    sibling.focus();
                    sibling.style.borderColor = '#ff0000';
                    sibling.style.borderWidth = '3px';

                    this.style.borderColor = '#000';
                    this.style.borderWidth = '1px';
                }
            } else if (evt.keyCode === 39) {
                sibling = this.nextSibling;

                if (sibling && sibling.nodeType === 1) {
                    sibling.focus();
                    sibling.style.borderColor = '#ff0000';
                    sibling.style.borderWidth = '3px';

                    this.style.borderColor = '#000';
                    this.style.borderWidth = '1px';
                }
            }
        };

        for (i = 0; i < buttons.length; i += 1) {
            buttons[i].addEventListener('keypress', bind, false);
        }
        </script>
    </body>
</html>

O código pode ser melhorado (já que existem trechos repetidos), mas serve para ter uma ideia. Ele foi testado apenas no Firefox 5.

Por favor, volte para dizer se deu certo.

Um abraço.

Editado por Willian Gustavo Veiga
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...