Auto Tab e Web Standards

O recurso do Auto Tab (envio automático do foco para o próximo campo) é algo que facilita e muito a navegação em formulários web principalmente para pessoas com deficiências.

Nesse post vamos mostrar um exemplo de código onde você poderá controlar toda a navegação dos seus formulários web.

O Script (baseado em: http://javascript.internet.com/forms/auto-tab.html)

function Tab(currentField, nextField, maxlength, e)
{
    var isNN = (navigator.appName.indexOf("Netscape")!=-1);
    var isNN = (navigator.appName.indexOf("Firefox")!=-1);

    var CampoAtual;

    var keyCode = (isNN) ? e.which : e.keyCode;
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];

    CampoAtual = currentField.value.toString();

    CampoAtual = CampoAtual.replace(/-/g,"");
    CampoAtual = CampoAtual.replace(/_/g,"");
    CampoAtual = CampoAtual.replace(/./g,"");
    CampoAtual = CampoAtual.replace(/,/g,"");

    if (CampoAtual != "" && !containsElement(filter,keyCode))

        if (CampoAtual.length == maxlength)
            if (document.getElementById(nextField) != null)
                document.getElementById(nextField).focus();
}

function containsElement(arr, ele) {
    var found = false, index = 0;
    while(!found && index < arr.length)
    if(arr[index] == ele)
    found = true;
    else
    index++;
    return found;
    }
    function getIndex(input) {
    var index = -1, i = 0, found = false;
    while (i < input.form.length && index == -1)
    if (input.form[i] == input)index = i;
    else i++;
    return index;
    }
    return true;
    }

No seu código:

protected override void OnPreRender(EventArgs e)
{
   Controle1.Attributes["onkeyup"] = "Tab(this, '" + this.Controle2.ClientID + "',12,event)";
}

Na sua página:

<asp:TextBox ID="Controle1" runat="server" MaxLength="12" Width="85px" ToolTip="Primeiro Campo"></asp:TextBox>
<asp:TextBox ID="Controle2" runat="server" MaxLength="12" Width="85px" ToolTip="Segundo Campo"></asp:TextBox>

Um ponto interessante é que para o funcionamento do script há necessidade de definir um maxlenght para cada campo e isto é uma prática que devia ser sempre adotada para todos campos haja visto que na sua programação, não é possível trabalhar com campos de tamanho livre, seja por limitação dos campos de suas tabelas do banco de dados ou por limitação do próprio framework e seus tipos de dados.

Código Completo: Download

Deixar uma resposta