Introdução
Antigamente os sistemas funcionavam com a tecla ENTER para trocar de campo. Isso agilizava a digitação, pois uma tecla ENTER fica ao lado do teclado numérico e o outro ENTER geralmente tem um formato diferente. As aplicações web vêm ganhando um mercado cada vez maior, porém há essa dificuldade aonde existem pessoas que trabalhavam com sistemas aonde o ENTER era para trocar de campo e não se adaptam facilmente ao TAB para a troca de campos. Esse artigo descreve uma solução simples para transformar a tecla ENTER para a mudança de campos como o TAB em aplicações ASP.NET.
Solução
Para solucionar esse problema vamos criar um JavaScript que controla toda vez que a tecla ENTER for pressionada. Esse script verifica qual o próximo campo obedecendo a prioridade do TABINDEX quando existir. Então vamos ao que interessa. O código, seguindo os passos:
- Crie um novo website no Visual Studio 2008 com o nome de TesteEnterTab.
- Crie uma pasta chamada JS dentro do seu WebSite e nessa pasta adicione um novo arquivo JScript chamado EnterTab.js.
Adicione o código:
var podePost=true; //Variável que cancela o post no firefox // Função principal function ClicouEnter(evt) { evt = getEvent(evt); if (getKeyCode(evt) != 13) return true; var elementAtivo = getTarget(evt); if (!elementAtivo) return true; // Se não tiver nenhum elemento ativo if (!elementAtivo.type) return true; // Se não tiver nenhum elemento ativo if (elementAtivo.type.toLowerCase() == "submit" || elementAtivo.type.toLowerCase() == "button") { podePost = true; elementAtivo.click(); return cancelaPost(evt); } var nextElement = null; if (elementAtivo.tabIndex == 0) nextElement = getNextElementByName(elementAtivo); else nextElement=getNextElementByTabIndex(elementAtivo); if(nextElement) { var theForm = document.forms[0]; if(theForm.addEventListener) theForm.addEventListener(’submit’, enviaForm, false); // Evento submit no form para FireFox if (nextElement.type.toLowerCase() == “submit” || nextElement.type.toLowerCase() == “button”) { if (elementAtivo.tabIndex == 0) return true; podePost = true; nextElement.click(); return cancelaPost(evt); } podePost = false; nextElement.focus(); return cancelaPost(evt); } else { podePost=true; return true; } } // Função para cancelar o envio do form para o FireFox function enviaForm(evt) { if (!podePost) { evt.cancelBubble = true; evt.returnValue = false; if (evt.preventDefault) evt.preventDefault(); if (evt.stopPropagation) evt.stopPropagation(); podePost = true; return false; } else return true; } function cancelaPost(evt) { evt.cancelBubble = true; evt.returnValue = false; if (evt.preventDefault) evt.preventDefault(); if (evt.stopPropagation) evt.stopPropagation(); return false; } // Recupera o evento do form function getEvent(evt) { if( !evt ) evt = window.event; //Internet Explorer return evt; } // Recupera o elemento que está com o foco function getTarget(evt) { var target; if (evt.srcElement) target = evt.srcElement; else if (evt.target) target = evt.target; return target; } // Recupera o código da tecla que foi pressionado function getKeyCode(evt) { var code; if(typeof(evt.keyCode) == ‘number’) code = evt.keyCode; else if(typeof(evt.which) == ‘number’) code = evt.which; else if(typeof(evt.charCode) == ‘number’) code = evt.charCode; else return 0; return code; } // Recupera o elemento deacordo com o TabIndex function getElementByTabIndex(tabIndex) { var form = document.forms[0]; for( var i=0; i
