A tecla ENTER

ASP.NET 2.0 - Tratando a tecla ENTER

Uma das tarefas mais comum com formulários web em páginas ASP.NET é submeter um formulário quando o usuário clicar a tecla ENTER. Deste modo , por exemplo, ao efetuar o login em uma página espera-se que o usuário pressione a tecla ENTER após informar a sua senha; da mesma forma ao efetuar pesquisa em uma página geralmente é requerido que o usuário informe o seu critério de busca e clique com o mouse sobre o botão de busca ou pressione a tecla ENTER.

Em páginas HTML ou em páginas ASP , não é muito complicado submeter um formulário usando a tecla ENTER. Geralmente o programador usa o código javascript <input type="submit"> para definir o botão padrão de forma que se o usuário clicar no botão ou pressionar a tecla ENTER o formulário será submetido.

Se você quiser evitar este comportamento e desabilitar a tecla ENTER você deve usar o tratamento de evento OnkeyDown na tag <body> da sua página. Uma das possibilidades é usar o seguinte código JavaScript/VbScript:

JavaScript	VBScript
if (window.event.keyCode == 13) { event.returnValue=false; event.cancel = true; }	If window.event.keyCode = 13 then event.returnValue = false event.cancel = true End If

Se você tentar usar a tecla ENTER em páginas ASP.NET , conforme o tipo do seu Navegador, você poderá obter resultados estranhos.

Para contornar o problema você tem que especificar exatamente qual botão será 'clicado' quando o usuário pressionar a tecla ENTER, conforme a caixa de texto que atualmente possuir o foco. Uma possível solução é incluir o atributo onkeydown no controle TextBox. Como exemplo temos o trecho de código abaixo onde definimos o atributo onkeydown para o controle TextBox1 e o controle Button1:

TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('"+Button1.UniqueID+"').click();return false;}} else {return true}; ");

Esta linha de código fará com que o botão de comando Button1 seja clicado quando o visitante pressione a tecla ENTER e o cursor é colocado na caixa de texto TextBox1.

Para testar , inicie o Visual Web Developer Express Edition (VWD) e crie um web site chamado teclaEnter. A seguir na página default.aspx inclua , estando no modo Design, uma caixa de texto com ID = TextBox1; um botão de comando com: ID=Button1 e Text=Submeter e outro botão com ID=Button2 e Text=Encerrar:

A seguir inclua no code=behind o código definido acima no evento Load do formulário e algum código no evento Click de Button1:

Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load

TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + Button1.UniqueID + "').click();return false;}} else {return true}; ")

End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

MsgBox("Foi clicado ao pressionar ENTER")

End Sub

Quando o foco estiver na caixa de texto e você pressionar ENTER será exibida a mensagem : "Fui Clicado ao pressionar ENTER"

Uma solução mais elegante com ASP.NET 2.0 - A propriedade DefaultButton

Se você usar a versão 2.0 da ASP.NET , resolver este problema é muito simples. Nesta versão temos a introdução do conceito de botão padrão.

O novo atributo defaultbutton pode ser usado com controles <form> ou <asp:panel> para definir o botão padrão. Assim, DefaultButton obtém ou define o identificador para o botão padrão que está contido no controle.

Você usa a propriedade DefaultButton para indicar qual botão é clicado quando o controle no Form/Panel tiver o foco e o usuário pressiona a tecla ENTER.

O botão que será 'clicado' depende de onde atualmente esta o cursor e o qual botão é escolhido como botão padrão para o formulário ou painel.

Vamos criar um novo web site no VWD e incluir na página default.aspx 3 controles TextBox, 1 controle Button1; a seguir inclua um componente Panel e no seu interior um controle TextBox e um controle Button , conforme leiaute abaixo.

Inclua também no code-behind o código associado ao evento Click de cada botão de comando conforme a seguir:

Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load

End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

MsgBox("O -Botão 1 - Foi clicado ao pressionar ENTER")

End Sub

Protected Sub button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button2.Click

MsgBox("O -Botão 2 - Foi clicado ao pressionar ENTER")

End Sub

O código completo da página default.aspx é o seguinte:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Tratando a tecla ENTER</title>

</head>

<body>

TextBox1 - <asp:textbox id="textbox1" runat="server"/><br />

TextBox2 - <asp:textbox id="textbox2" runat="server"/><br />

<br />

<asp:button id="button1" text="Button1" runat="server"/> <br />

<asp:panel ID="Panel1" defaultbutton="button2" runat="server">

TextBox3<asp:textbox id="textbox3" runat="server"/>

<asp:button id="button2" text="Button2" runat="server"/>

</asp:panel>

</form>

</body>

</html>

Neste código estamos definindo o botão padrão para o formulário como sendo o Button1 e para o panel como sendo o Button2.

No Form, se o foco estiver em qualquer uma das caixas de texto TextBox1 ou TextBox2 e for pressionado a tecla ENTER o botão Button1 será clicado.

No Panel , estando o foco na caixa de texto TextBox3, ao pressionar ENTER o Button2 será clicado.

Eu sei é apenas ASP.NET, mas eu gosto...

José Carlos Macoratti