none
Mudar de campo automaticamente ASP.NET RRS feed

  • Pergunta

  • Pessoal gostaria de saber se é possível fazer com que mude de campo automaticamente no ASP.NET, eu vi um site onde tinha essa opção e achei muito interessante, algo sabe como devo fazer? Se é possível ter este tipo de recursos no ASP.NET?

    Por exemplo tenho um campo CEP, após o usuário digitar os nove caracteres automaticamente o sistema mudaria o foco para o proximo campo.

    Agradeço se alguém poder me ajudar.

    Anderson Santos

    quarta-feira, 31 de julho de 2013 23:39

Todas as Respostas

  • Olá Anderson, você tem que fazer isso com JQuery ou Javascript, sendo que abaixo segue a forma em Javascript "puro":

    <script type="text/javascript"> window.onload = function() { var campo_cep = document.GetElementById('txtCampoCep'); campo_cep.onkeyup = function(){
    var outro_campo = document.getElementById('txtOutroCampo');
    if(this.value.length ==9)outro_campo.focus();

    }; }; </script>


    Coloque esse código dentro das suas tag "head" e ao invés de "txtCampoCep" e "txtOutroCampo" coloque os seus nomes de controle do CEP e do próximo campo que deseja dar o "tab".

    Lembrando que eu coloquei no código que pularia para o próximo campo quando chegar no nono dígito. 

    Só adaptar para o seu caso ;)

    Qualquer coisa, estamos aí.

    Abs


    Alexandre Felipe Malavasi Cardoso

    quinta-feira, 1 de agosto de 2013 00:36
  • Alexandre e se eu estiver usando um código em javascript por exemplo main.js como eu faço para chamar esta função através do meu webform? Eu falo no textbox?

    Tem como postar um exemplo de como ficaria?

    quinta-feira, 1 de agosto de 2013 01:19
  • Existem várias formas de se fazer a "mesma" coisa, mas um das formas de se fazer isto é criando uma função no main.js: 

    function TabCampo(tamanho, campo_atual,id_ proximo_campo)
    {
    
      var proximo_campo = document.getElementById(id_proximo_campo);
    
      if(this.value.length ==tamanho)proximo_campo.focus();   
    
    }

    Na tag "head" do seu WebForm você deve referenciar desta forma o arquivo main.js:

    <script src="main.js" type="text/javascript"></script>

    E como você está utilizando um Asp:TextBox, você pode atribuir no load da página a função ao Textbox:

    TxtCampoCep.Attributes.Add("onkeyup", "TabCampo(9,this,'txtProximoCampo');");

    Mas, você pode também atribuir com "window.load" também, semelhante à primeira forma que mostrei, só que passando a função criada.

    Abs


    Alexandre Felipe Malavasi Cardoso

    quinta-feira, 1 de agosto de 2013 01:48
  • Alexandre sei que estou lhe incomodando tanto neste poste quanto no outro, desculpa aí por estar enchendo o saco mais gostaria de saber se teria como você enviar um exemplo de como faz para mudar de campo automaticamente usando de um arquivo main.js pois eu estou tentando e na hora que vou rodar ele trava o localhost, poderia me mandar um exemplo por email?

    anderson.feitoza.santos@gmail.com

    Se poder eu agradeço muito...

    quinta-feira, 1 de agosto de 2013 02:28
  • Olá Anderson,

    o exemplo que eu possuo é exatamente o que o que postei aqui ;)

    Abs


    Alexandre Felipe Malavasi Cardoso

    quinta-feira, 1 de agosto de 2013 02:33
  • Eu fiz dessa maneira Alexandre e quando eu rodo a aplicação ela deixa eu digitar apenas dois caracteres e trava. Segue abaixo o códigos confirma se estou colocando todos no lugar certo.

    main.js

    function TabCampo(tamanho, campo_atual, id_proximo_campo)
    {
    
      var proximo_campo = document.getElementById(id_proximo_campo);
    
      if(this.value.length ==tamanho)proximo_campo.focus();   
    
    }

    index.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace foco
    {
        public partial class index : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                TextBox1.Attributes.Add("onkeyup", "TabCampo(9,this,'TextBox2');");
            }
        }
    }

    index.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="foco.index" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/main.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        </form>
    </body>
    </html>

    Está correto assim, é dessa maneira que está o seu exemplo? Porque não está funcionando?

    quinta-feira, 1 de agosto de 2013 02:46