Redefinindo Tabindex ao adicionar e remover elementos Dom

Recentemente, tive um problema persistente que, honestamente, tive dificuldade em recriar, até hoje. A situação ocorreu quando adicionei e removi elementos DOM em reação a um usuário marcando e desmarcando uma caixa de seleção. Se o usuário passar para o próximo campo, ele se verá no topo do formulário, não no próximo campo em ordem lógica.

Se você se lembra de você deve definir o atributo tabindex para qualquer elemento do formulário para que o usuário possa simplesmente percorrer os campos sem pegar o mouse. Nesse caso, o usuário mudaria o estado da caixa de seleção pressionando a barra de espaço, sem usar o mouse. O que traz um ponto: você deve sempre testar seus formulários sem usar o mouse, tire-o do seu site!

Agora, esse problema demorou um pouco para eu recriar, simplesmente não consegui descobrir. Na verdade, tentei em vários navegadores, mas finalmente minha persistência valeu a pena e finalmente aconteceu comigo.

Para demonstrar o problema, vou usar o formulário abaixo. O formulário contém uma caixa de seleção para o usuário indicar se possui um endereço de e-mail. Ele é verificado por padrão simplesmente para que faça sentido neste contexto. Se o usuário desmarcar a caixa de seleção, a linha de e-mail será removida do formulário. Se marcarem a caixa de seleção, a linha de e-mail será restaurada ou adicionada ao DOM.

Este é o formulário tal como é inicialmente carregado pelo navegador. Eu tenho percorrido o formulário para definir o foco na caixa de seleção. Pressionar a barra de espaço desmarcará a caixa de seleção e removerá a linha de e-mail.

Agora é aqui que alguma mágica acontece, porque eu tenho uma função de evento de verificação personalizada definida que não vou entrar em detalhes neste postar.

O código está incluído no meu gigante Projeto de amostras.

O exemplo é projetado como a função $.click () que envolve as interações do evento de clique. Portanto, nesta demonstração, a função de evento de verificação executa a função toggleEmail () como seu manipulador de eventos de clique. O toggleEmail () recebe uma referência à caixa de seleção, cuja propriedade marcada indica o estado atual da caixa de seleção.

  $ ("#haveEmail").check (toggleEmail); function toggleEmail (value) {if (! value.checked) {$ ("#liEmail").remove (); } else {$ ("#lihaveEmail").after (""); } $ ("#haveEmail").focus (); }  

Se a caixa de seleção estiver marcada, a linha do e-mail é removida, caso contrário, é adicionada. Apenas uma pequena observação, para facilitar a restauração da linha de e-mail no mesmo lugar, dei à linha da caixa de seleção um id lihaveEmail e usei a função $.after ().

Como você pode ver, desmarcar a caixa de seleção remove a linha. Mas se você estiver usando o IE 8, há uma chance de o refluxo de DOM ter causado a redefinição do foco da guia na parte superior do formulário, não retido na caixa de seleção. Eu digo no IE 8, não consegui recriar esse problema em nenhum outro navegador e não tive acesso a uma versão anterior do IE.

A maneira como eu”consertei”esse problema foi definir explicitamente o foco, $ (“# haveEmail”). focus (); , na caixa de seleção após o elemento ser adicionado ou removido do DOM. Agora você pode continuar a percorrer o formulário naturalmente.

Portanto, embora esse fosse um problema muito incômodo que tive de recriar, é facilmente resolvido com um pouco de codificação explícita.