Mais um artigo escrito por Tiago Dantas. Agradecemos novamente pela contribuição.

Autoria de Tiago Dantas ()

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; i++ )
    {
        var el = form.elements[i];

        if( el.tabIndex && el.tabIndex == tabIndex )
            return el;
    }

    return null;
}

// Recupera o próximo elemento de acordo com o nome
function getNextElementByTabIndex(elementAtivo)
{
    var targetTabIndex = elementAtivo.tabIndex;
    var nextTabIndex = targetTabIndex+1;
    var nextElement = getElementByTabIndex(nextTabIndex);

    // Margem de erro
    var i=0;

    for(i=0; i < 15; i++) // Tolerância de tabIndex
    {
        if (nextElement!=null && !nextElement.disabled)
            break;

        nextTabIndex = nextTabIndex+1;
        nextElement = getElementByTabIndex(nextTabIndex);
    }

    return nextElement;
}

// Recupera o próximo elemento de acordo com o nome
function getNextElementByName(elementAtivo)
{
    var passou=false;
    var form = document.forms[0];

    for(var i=0; i < form.elements.length; i++)
    {
        var el = form.elements[i];
        if( el && el.id == elementAtivo.id || passou)
        {
            passou=true;
            // Encontrou o elemento atual
            var x=i+1;
            var elnx = form.elements[x];

            if(elnx)
            {
                switch (elnx.type)
                {
                    case "text":
                    case "submit":
                    case "button":
                    case "reset":
                    case "select-one":
                    case "checkbox":
                    case "image":
                    case "password":
                    case "radio":
                    case "reset":
                    case "submit":
                    case "textarea":
                        if (elnx.disabled)
                            continue;

                        break;
                    default:
                        continue;
                    break;
                }

                return elnx;
            }
        }
    }

    return null;
}

O código acima verifica se o ENTER foi pressionado e dá o foco em 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.

Você pode também baixar o Código Fonte.

Um grande abraço!