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