Mantendo o foco da guia dentro de um diálogo do jQuery - javascript, jquery, jquery-ui

Atualmente, estou aprendendo a caixa de diálogo jQuery egostaria de usá-lo no meu projeto paralelo. Quero adicionar tabindex aos divs na caixa de diálogo para tabulação. Mas o foco vai para outro lugar quando eu mostro o último elemento da caixa de diálogo.

Quero que o foco volte ao primeiro elemento quando tabular o último elemento. Existe uma maneira de manter o foco na caixa de diálogo?

Obrigado!

Respostas:

Adicione um evento de pressionamento de tecla no último elemento para ignorar a ação da guia padrão e coloque o foco novamente no primeiro elemento na caixa de diálogo.

O exemplo a seguir assume que o último elemento é last_element_id e o primeiro é first_element_id.

$("#last_element_id").on("keydown", function(e) {
if ((e.keyCode || e.which) == 9) {
$("#first_element_id").focus();
e.preventDefault();
}
});

Desative a tabulação de qualquer elemento que você queira pular desta forma:

$("#element").attr("tabIndex", -1);

Qualquer índice de tabulação negativo deve impedir que o elemento seja focalizado, apenas negue o valor existente e remova o sinal de menos ao colocar o elemento novamente na ordem de tabulação.

por exemplo. altere um índice de tabulação de 10 para -10 e depois para 10