Problema com controle de foco (onblur)

[crzmn 0]

Bom dia,

aqui na empresa estamos migrando um produto desktop para a web porém surgiu uma necessidade que não consegui sanar...

 

Preciso controlar o foco dos componentes da seguinte forma:

 

- Um componente só pode perder o foco para um outro componente que seja "nosso", ou seja, caso o usuário clicasse no background, em uma imagem, ou algo, que não fosse um componente criado por nós o foco voltasse para esse componente.

 

Então vamos a cena:

 

Como identificamos nosso componente (todos eles são criados dinamicamente via javascript):

 

var btn  = document.createElement('button');
btn.type = 'componenteNosso';

pegando o type, fazendo uma comparação de strings, consigo identicar quais são meus e quais são elementos..

 

Então o proximo passo natural seria controlar o ONBLUR, quando um elemento MEU, perder o foco para um elemento que não tenha o TYPE igual ao meu, travaria essa perda de foco..

 

não vou colar o codigo real, somenta a logica que usei:

 

document.addEventListener('blur', function(ev) {
    var elfocusLost   = ev.target; // elemento que perdeu o foco
    var elfocusGained = ev.explicitOriginalTarget; // elemento que ganhou o foco

    if ( elfocusLost.type == 'componenteNosso' && elfocusGained.type == 'componenteNosso') {
        return true;
    }
    return false;

}, true );

Otimo, na teoria funcionaria, estou monitorando todos os onblur, caso o os campos sejam meus, eu deixo o foco rolar, se não retorno falso e travaria..

Porém não funcionou.. Achei que fosse problema no return false, que não fosse suficiente para parar o evento, então adicionei o stopPropagation, cancelbubles e até o preventDefault()...

ev.cancelBubble = true;
ev.stopPropagation();
ev.preventDefault();

Porém não conseguia parar o evento.. e sempre o meu componente perdia o foco para o background e afins...

 

Por sorte aqui na empresa temos um livro.. "Javascript - guia definitivo" e nele informava que eventos onblur não podem ser cancelados..

Ai desisti de implementar dessa forma..

 

No momento estou tentando usar um campo de "espelho"..

Ao inves de tentar parar o evento do blur, jogo o foco para um campo com style display=block e esse componente jogaria o foco devolta ao meu componente.. porém também não esta muito consistente... estou estudando essa implementação ainda..

 

Queria saber opniões de vocês...

Se alguem já teve problema com algo do tipo..

 

Fico no aguardo e espero opniões...

 

Obrigado...

[Henrique Barcelos 290]

Bom...

 

Nunca fiz nada do tipo...

 

Talvez funcione dessa maneira:

 

Pegar o alvo (target) de todos os elementos que receberem foco e verificar se está na lista dos permitidos, se não estiver, retorna o foco para o elemento anterior...