Artigo Enter como Tab

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<FORM.ELEMENTS.LENGTH; erro o de i++ el.tabIndex ) el; getNextElementByTabIndex(elementAtivo) targetTabIndex="elementAtivo.tabIndex;" Margem for(i="0;" i<15; Tolerância (nextElement!="null" !nextElement.disabled) nextTabIndex="targetTabIndex+1;" nextElement="getElementByTabIndex(nextTabIndex);" nextElement; Recupera próximo acordo com nome function getNextElementByName(elementAtivo) form="document.forms[0];" for(var i="0;" i<form.elements.length; i++) if( el="form.elements[i];" && el.id="=" elementAtivo.id || passou) passou="false;" Encontrou elemento atual x="i+1;" var elnx="form.elements[x];" if(elnx) switch (elnx.type) { “text”: “button”: “select-one”: “checkbox”: “image”: “password”: “radio”: “reset”: “submit”: case “textarea”: if (elnx.disabled) default: continue; break; elnx; return null; } < FONT>

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);
    }
}
</FONT>

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”;
</FONT>

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;
}
</FONT>

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!