Para uma boa experiência do usuário, a acessibilidade e a disponibilidade do site/aplicativo da Web, bem como a funcionalidade são cruciais.
Quando nosso site está funcionando bem/experiência é boa, os usuários não estão cientes disso, mas definitivamente sentirão quando não estivermos indo bem. Uma parte importante da disponibilidade e acessibilidade do aplicativo é o processamento do foco de entrada, mas esse é outro ponto que os desenvolvedores geralmente ignoram.
Um exemplo de mau manuseio do foco de entrada: abra uma janela depois de clicar em um link, mas não concentra o cursor em nenhum elemento na janela. Pior ainda: concentre -se em um elemento na janela modal, mas o foco não retorna após o fechamento. Idealmente, uma referência é salva quando o link é acionado e o cursor é focado em uma nova janela e move o cursor para trás quando a janela fecha.
Mas e se você não souber em qual elemento o cursor de entrada está agora?
O javascript
É fácil usar document.activeElement para encontrar o elemento atualmente selecionado:
A cópia do código é a seguinte:
var focusElement = document.activeElement;
/* Por exemplo, um exemplo:
var triggerElement = document.activeElement;
myModal = new MyModal ({
ONOPEN: function () {
this.container.focus ();
},
ONCLOSE: function () {
triggerElement.focus ();
}
});
*/
Esta propriedade não está disponível apenas em elementos regulares de entrada, mas também inclui links de tag Form Fields ou <a>, mas qualquer elemento com o conjunto de atributos Tabindex está disponível.
A razão pela qual eu gosto do documento.ActiveElement é que você não precisa usar a audição de eventos ou delegar ouvintes para rastrear o elemento e obter foco - você pode obter essa propriedade a qualquer momento. Obviamente, antes de usar esses recursos, você deve fazer muitos testes - se existem bugs nas condições de navegador ou corrida. Em suma, estou muito satisfeito com isso e acho muito confiável!