Artigo Enter como Tab

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (6)  (0)

Enter como TAB para toda sua aplicação Asp.NET mais prático que as outras.

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

O código acima verifica se o ENTER foi pressionado e dá o foco no próximo campo. Quando existir o TABINDEX no campo ele verifica o próximo campo respeitando uma tolerância dos 15 próximos. Exemplo: você pode ter um campo com TABINDEX 1 e o próximo campo pode ser até TABINDEX 15.

  • Agora crie um arquivo de classe no seu WebSite chamado BaseWebUi.cs (se seu site for em C#)

A classe BaseWebUI ficará assim:

public class BaseWebUI : System.Web.UI.Page { protected override void OnInit(EventArgs e) { if ((new AppSettingsReader()).GetValue("EnterComoTab", typeof(string)).ToString() == "true") { ClientScript.RegisterStartupScript(typeof(void), "entertab", "if (typeof(ClicouEnter) == 'function') document.onkeydown = ClicouEnter;", true); } base.OnInit(e); } }

A classe herda da System.Web.UI.Page e sobrescreve o método OnInit (que é executado toda vez que a página é carregada). O método onInit associa à função ClicouEnter no evento onkeydown da página, essa associação é feita caso a chave EnterComoTab do web.Config estiver como true.

  • Agora é só referenciar o arquivo JS e adaptar o TabEnter à sua página. Abra o arquivo Default.aspx.cs (se seu site for em C#) e troque a herança de Systema.Web.Ui.Page para BaseWebUi

Abra o arquiVo Default.aspx e entre as tags Head coloque a referência ao arquivo MSGAguarde.js

  • Acrescente a chave EnterComoTab no web.config, a chave appSetting fica fora da tag system.web.

Pronto! Agora todo vez que for pressionado o ENTER o JavaScript verifica qual o próximo campo para dar o foco.

Teste

Para testar nossa aplicação vamos criar 2 TextBox e um botão do asp.net na Default.aspx e dê dois cliques para digitar o código do evento click. E escreva o seguinte código:

TextBox1.Text = “Clicou”;

O código serve para quando o botão for acionado o sistema escreve a mensagem “Clicou” no primeiro TextBox criado. No evento Page_Load escreva o seguinte código:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) TextBox1.Focus(); Page.Form.DefaultButton = Button1.UniqueID; }

O código acima seta o foco no TextBox1 quando a página é carregada e seta o botão Button1 como botão padrão, isso faz quando o ENTER for pressionado o botão será clicado. Essa estrutura é do próprio ASP.NET.

Execute e o foco inicial será o TextBox1, aperte a tecla ENTER e o sistema dá o foco no TextBox2, pressione o ENTER mais uma vez e o botão será clicado.

Conclusão

Um software quando é usado para a digitação constante exige agilidade, tem que ter teclas de atalho e uma estrutura para que não se use o mouse. O ENTER como TAB resolve o problema de adaptação mais simples dos usuários com sistemas WEB. Essa solução funciona em Internet Explorer e Mozila FireFox e adapta facilmente a sua aplicação. Todo programador ou analista recebe algumas reclamações sobre alguns problemas, como o ENTER como TAB, e tentam convencer o usuário que isso não é um problema e que as tendências novas são diferentes. Isso gera uma insatisfação do cliente que pode comprometer e muito o projeto. Lembre-se, o cliente tem sempre a razão.

Um grande abraço!

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?