por Cesar Cassiano Schimanco

Definir o botão padrão ao pressionar ENTER em formuários ASP.NET

Vamos imaginar uma página com dois botões, supondo que seja um de busca e logo abaixo outro de cadastro de newsletter, como na imagem abaixo.
Então você digita o email no campo de cadastro para receber newsletter e preciona enter, e em seguida recebe o resultado da busca, sendo que digitou o e-mail e queria se cadastrar para receber a newslwtter, então descobre que o evento do enter acionou o botão de busca e não o da newsletter.

 
Código:

<div>
    <h4>Busca</h4>
    <asp:TextBox ID="txtBusca" runat="server" />
    <asp:Button ID="btnBusca" runat="server" Text="Busca" 
        onclick="btnBusca_Click" />
</div>
<div>
    <h4>Cadastre-se em nossa newsletter</h4>
    <asp:TextBox ID="txtEmail" runat="server" />
    <asp:Button ID="btnEnviar" runat="server" Text="Cadastar" 
        onclick="btnEnviar_Click" />
</div>

 Para resolver esse problema podemos trocar a tag div por um Panel e adicionar DefaultButton, como no exempo abaixo.

<asp:Panel ID="pnlBusca" DefaultButton="btnBusca" runat="server">
    <h4>Busca</h4>
    <asp:TextBox ID="txtBusca" runat="server" />
    <asp:Button ID="btnBusca" runat="server" Text="Busca" 
        onclick="btnBusca_Click" />
</asp:Panel>
<asp:Panel ID="pnlNewsletter" DefaultButton="btnEnviar" runat="server">
    <h4>Cadastre-se em nossa newsletter</h4>
    <asp:TextBox ID="txtEmail" runat="server" />
    <asp:Button ID="btnEnviar" runat="server" Text="Cadastar" 
        onclick="btnEnviar_Click" />
</asp:Panel>

Tudo que ficar dentro dos Panels com DefaultButtons, ao pressionar enter, será acionado o evento de seu respectivo botão.
Mas se você esta usando um LinkButton por exemplo, vai perceber que isso não vai funcionar em alguns browsers. A solução (gambiarra) para isso seria colocar um botão com display:none e no onclick do botão, colocar o mesmo do onclick do LinkButton. E no DefaultButton do Panel coloque o id do botão.

 

Comentários

Carregando comentários

Postar um novo comentário



Processando...