01.Blogs :
mauriciogonzatto  
.NET, C#, Oracle, Web, tecnologia em geral e diversidades.

Padrões W3C - O pesadelo do desenvolvedor Web.

Ontem, começei uma jornada rumo à uma funcionalidade de funcionasse nos dois navegadores IE7 e FF2.0. Fazer com que a tecla Enter tivesse a funcionalidade do TAB.
Bom, existem códigos para isso, mas códigos que fazem com que você adicione um evento que monitore isso e sete o foco no seguinte. Mas precisaria de algo que registrasse esse evento nas áreas que tenham os componentes.


Primeiro drama : Percorrer os elementos do documento.

Deve ser pessoal, mas inicialmente fiz uma função recursiva que  pegasse todos os componentes e registrasse o evento no onkeypress, para ver se a tecla era o enter. Mas, não sei a mó di quê o Javascript se perde totalmente na recursividade então tive que mudar a estratégia e fazer as devidas chamadas por div's ou painéis.

// Passe o container de elementos como parâmetro, o div, painél ou form
function varreElementos(el)
{
    if(el.hasChildNodes())
    {               
        for(i=0;i<el.childNodes.length;i++)
        {                        
                if(
el.nodeType == 1 && el.id != ''
)
                {
                    setaFuncaoElementos(el.childNodes[i]);
                }
        }
    }
    else
    {
                if(el.nodeType == 1 && el.id != '')
                {
                    setaFuncaoElementos(el);
                }

    }
}

Em seguida precisava criar uma função que registrasse o evento aos componentes que me interessavam
Aqui vai a primeira diferença, o IE utiliza o método attachEvent, e o FF addEventListener. Segundo os padrões da W3C:
"
To register an event listener, DOM applications use the methods EventTarget.addEventListener() and EventTarget.addEventListenerNS()."
A segunda diferença está na chamada ao evento. Repare que no FF chamamos apenas por keypress e no IE onkeypress ... faça-me o favor!!!

function setaFuncaoElementos(el)
{        
        if (window.addEventListener)
        {
            el.addEventListener('keypress', handleEnter, false);           
        }
        else
        if (window.attachEvent)
        {
            el.attachEvent('onkeypress', handleEnter);                      
        }
}

Na sequência, o Evento que será disparado no keypress para verificar se o clique foi dado na tecla enter e então setar o foco no próximo componente do container.
Primeiro: a referência às propriedades/métodos do argumento. Para referenciar o elemento que disparou o evento os padrões.
O IE faz a referência por srcElement, enquando os padrões recomendam target.
O engraçado que antes de eu implementar a chamada ao método
preventDefault, eu via que no IE funcionava e no FF não. O detalhe é que no IE, quando se trabalha com gerenciamento de eventos, ele faz essa jogada automática, ele cancela os demais eventos que estejam atrelados ao que você está manipulando. Já o FF, é necessário efetuar a chamada do preventDefault, pois senão o enter vai disparar o POST.

function handleEnter(e)
{      
    var field;                    
    if(window.navigator.appVersion.indexOf("MSIE") != -1){
        field = e.srcElement;
    }else{
        field = e.target;
    }       
    if (e.keyCode == 13)
    {
        var i;      
        for (i = 0; i < field.form.elements.length; i++)
        {           
            if (field.id == field.form.elements[i].id)
                break;
        }
       
        i = (i + 1) % field.form.elements.length;
       
        if( (!field.form.elements[i].readOnly) && (!field.form.elements[i].disabled) && (field.form.elements[i].type != 'hidden'))
        {
            field.form.elements[i].focus();
        }
        else
        {
            return false;
        }
       
        if (e && e.preventDefault) {           
            e.preventDefault();
        }                              
        return false;    
    }
    else
    {       
        return true;
    }
}


É isso ae, agora o ENTER == TAB

Quaisquer dúvidas, críticas e sugestões estamos ae!

[]'s

posted on Wednesday, October 11, 2006 9:13 AM by mauriciogonzatto


 
03.UPDATE CALENDAR :
<October 2006>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

05.MY LINKS :

07.Subscriptions :

Subscriptions


© Copyright 2005 Microsoft Corporation. All Rights Reserved.
Terms of Use | Privacy Statement | Code of Conduct | Hosted by MaximumASP for Microsoft
WHO-BAR