Ao inserir dados em um formulário web extenso, os usuários preferem utilizar a tecla ENTER ao invés da tecla TAB para ir para o próximo campo. Veremos aqui como conseguir este efeito com JQuery.
- Adicione um novo formulário em sua WebApplication ou em seu Website;
- Adicione alguns controles Textbox para simularmos um cadastro de usuário, conforme abaixo:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:200px;">
<table cellpadding="3" cellspacing="3" border="0">
<tr><td>
<asp:Label ID="lblName" Text="Name: " runat="server"></
asp:Label></td>
<td><asp:TextBox ID="txtName" Width="200px" runat="server"></
asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblAddress" Text="Address: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtAddress" Width="200px"
runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblContact" Text="Contact Number: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtContact" Width="200px"
runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblEmail" Text="Email: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtEmail" Width="200px" runat="server"></
asp:TextBox></td></tr>
<tr><td></td><td><asp:Button ID="btnSubmit" Text="SUBMIT"
runat="server" />
<asp:Button ID="btnReset" Text="RESET" runat="server" />
</td></tr>
</table>
</fieldset>
</div>
</form>
<div align="center">
<fieldset style="width:400px;height:200px;">
<table cellpadding="3" cellspacing="3" border="0">
<tr><td>
<asp:Label ID="lblName" Text="Name: " runat="server"></
asp:Label></td>
<td><asp:TextBox ID="txtName" Width="200px" runat="server"></
asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblAddress" Text="Address: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtAddress" Width="200px"
runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblContact" Text="Contact Number: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtContact" Width="200px"
runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblEmail" Text="Email: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtEmail" Width="200px" runat="server"></
asp:TextBox></td></tr>
<tr><td></td><td><asp:Button ID="btnSubmit" Text="SUBMIT"
runat="server" />
<asp:Button ID="btnReset" Text="RESET" runat="server" />
</td></tr>
</table>
</fieldset>
</div>
</form>
Vamos ao JQuery
- Na função document.ready() do JQuery, insira o seguinte seletor $('input:text:first'), este seletor vai recuperar o primeiro elemento do tipo 'text' do seu form;
- Coloque $('input:text:first').focus(), para setar o focu no primeiro textbox do seu form;
- Use o bind para registrar o handler do evento "keydown" em todos os textboxes do form: $('input:text').bind("keydown", function(e) {
- Verifique se a tecla ENTER foi pressionada: if (e.which == 13) {
- Se o ENTER foi pressionado previne o evento padrão, que seria o submit do form: e.preventDefault();
- Incremente o índice do textbox corrente e recupere o índice do próximo textbox: var nextIndex = $('input:text').index(this) + 1;
- Coloque o focu no próximo textbox: $('input:text')[nextIndex].focus();
}
}); - Adicione a função do evento click do botão para limpar o formulário: $('#btnReset').click(
function() {
$('form')[0].reset();
}); - Código JQuery completo <script type="text/javascript">
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind("keydown", function(e) {
if (e.which == 13) { //tecla enter keycode =13
e.preventDefault(); //nao executa evento padrao
var nextIndex = $('input:text').index(this) + 1;
$('input:text')[nextIndex].focus();
}
});
$('#btnReset').click(
function() {
$('form')[0].reset();
});
});
</script>
- ASP.NET JQuery CookBook
- www.jquery.com
Nenhum comentário:
Postar um comentário