Jump to content
Fórum Script Brasil
  • 0

andar com as setas pela table


ratamiette

Question

2 answers to this question

Recommended Posts

  • 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.

Edited by Willian Gustavo Veiga
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...