none
Evento TextChanged deixa de funcionar quando adiciona-se a propriedade MaxLength RRS feed

  • Pergunta

  • Pessoa boa tarde,

     

    Estou desenvolvendo um sistema em ASP.NET com a linguagem C# e não estou conseguindo me utilizar do evento TextChanged, ele não está funcionando.

    O cenário em questão é o seguinte, tenho um TextBox onde o usuário irá digitar no mesmo o CEP da sua residência, no momento que este TextBox  perder o foco deveria ser chamado um método no meu banco de dados retornando o nome da rua, o bairro cidade e estado. Pois bem pesquisei na internet e vi que para fazer este tipo de coisa seria necessário que eu me utilizasse do evento TextChanged, fiz  um teste e funcionou perfeitamente, porém queria adicionar ao TextBox uma máscara pelo fato de se tratar de um campo de CEP, pesquisei mais uma vez na Internet e encontrei esse tipo de implantação com javascript para criação das mascaras http://www.devmedia.com.br/mascara-em-asp-net-com-javascript/10252 adicionei ao meu código da seguinte maneira postado logo abaixo, pois do jeito que estava no site não funcionava, dai alterei onkeydown por onkeypress segundo encontrei na internet e funcionou com um pequeno probleminha, a mascara que eu utilizei não limita a quantidade de caractere, ou seja, o campo CEP tem apenas 9 campos essa mascara permite quantas o usuário digitar.

     

    Foi ai que pensei em usar MaxLength="9", e para a minha surpresa novamente parou de funcionar, se eu altero o MaxLength para “10” o mesmo funciona quando digitado apenas 9 digitos porem se eu digito o limite ele não funciona.

     

    Como devo fazer neste caso? Como posso para estar limitando a quantidade de caracteres sem deixar de funcionar? Teria como fazer isso no código javascript que tenho?

     

    Fico no aguardo.

    quarta-feira, 31 de julho de 2013 19:36

Respostas

  • Olá Anderson,

    você precisa referenciar primeiro os arquivos .js para funcionar:

     <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.maskedinput.js" type="text/javascript"></script> 
    
    <script type="text/javascript">
                $(document).ready(function () {
                    $("#TextBox1").mask("99999-999");
                });
        </script>
        
       

    Assim, exatamente nessa ordem, vai funcionar ;) 

    No seu código não está sendo encontrada a função da máscara pois ela se encontra no arquivo .js que deve ser referenciado antes da chamada da função.

    Este é o problema. Após a mudança e o teste por gentileza nos diga se funcionou para encerrarmos a thread ;)

    Abs


    Alexandre Felipe Malavasi Cardoso

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

Todas as Respostas

  • Pessoal esqueci de postar os fontes segue abaixo.

    function formataCEP(campo, evt)
    {
     //312555-650
     var xPos = PosicaoCursor(campo);
     evt = getEvent(evt);
     var tecla = getKeyCode(evt);
     if (!teclaValida(tecla))
      return;
    
     vr = campo.value = filtraNumeros(filtraCampo(campo));
     tam = vr.length;
    
     if (tam < 5)
      campo.value = vr;
     else if (tam == 5)
      campo.value = vr + '-';
     else if (tam > 5)
      campo.value = vr.substr(0, 5) + '-' + vr.substr(5);
     MovimentaCursor(campo, xPos);
    }
    

    <asp:TextBox ID="TextBox1" runat="server" MaxLength="9" onkeydown="formataCEP(this,event);" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

    quarta-feira, 31 de julho de 2013 19:38
  • Olá amigo,

    Utilize JQuery, que funciona certinho :)

    Referencia no seu projeto os arquivos do JQuery e de um plugin para trabalhar com máscaras para campo texto, da seguinte forma:

     <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="jquery.maskedinput.js" type="text/javascript"></script>

    Download do JQuery você pode fazer aqui.

    Download do plugin (maskedinput), você pode fazer aqui.

    Após referenciar os dois arquivos, coloque isso no head da sua página com o nome do ID do controle:

    <script type="text/javascript">
            $(document).ready(function () {
                $("#TextBox1").mask("99999-999");
            });
        </script>

    Acabei de testar aqui e funcionou perfeitamente, mesmo mantendo o AutoPostBack=true e MaxLength=9.

    E também não permitiu digitar mais valores (acima de nove caracteres) :)

    Acho que vale a pena testar aí. Qualquer coisa, é só dar um toque aqui no fórum.

    Abs.


    Alexandre Felipe Malavasi Cardoso

    quinta-feira, 1 de agosto de 2013 01:11
  • Alexandre ficará mais ou menos assim?

    <%@ 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 type="text/javascript">
        $(document).ready(function () {
            $("#TextBox1").mask("99999-999");
        });
        </script>
    
        <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="jquery.maskedinput.js" type="text/javascript"></script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" MaxLength="9" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        </form>
    </body>
    </html>

    Eu fiz conforme postado acima e deu a seguinte mensagem quando fui executar, você poderia me ajudar?? Estou começando agora em ASP.NET e tenho muita dificuldade.

    quinta-feira, 1 de agosto de 2013 01:49
  • Olá, 

    Tudo bem. Estamos aqui pra ajudar ;)

    Está dando erro de javascript porque não está encontrando a biblioteca Jquery.

    Mude a ordem, fazendo a referência aos arquivos .js primeiro:

    <script src="jquery-1.10.2.min.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>

    <script type="text/javascript">
            $(document).ready(function () {
                $("#TextBox1").mask("99999-999");
            });
        </script>


    quinta-feira, 1 de agosto de 2013 02:02
  • PS: não se esqueça de fazer download da biblioteca Jquery e do plugin (os dois arquivos .js) e adicioná-los no seu projeto dando um "Add Existing Item"


    Alexandre Felipe Malavasi Cardoso

    quinta-feira, 1 de agosto de 2013 02:14
  • Alexandre eu tentei novamente e dessa vez não apareceu a mascara. 

    Eu fiz conforme você falou e tentei no Visual Studio 2010 e no 2012 e não funcionou.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script type="text/javascript">
                $(document).ready(function () {
                    $("#TextBox1").mask("99999-999");
                });
        </script>
        
        <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.maskedinput.js" type="text/javascript"></script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" MaxLength="9" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        </form>
    </body>
    </html>
    


    Você poderia me passar a solution por email?

    anderson.feitoza.santos@gmail.com

    Se você puder eu agradeço

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

    você precisa referenciar primeiro os arquivos .js para funcionar:

     <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.maskedinput.js" type="text/javascript"></script> 
    
    <script type="text/javascript">
                $(document).ready(function () {
                    $("#TextBox1").mask("99999-999");
                });
        </script>
        
       

    Assim, exatamente nessa ordem, vai funcionar ;) 

    No seu código não está sendo encontrada a função da máscara pois ela se encontra no arquivo .js que deve ser referenciado antes da chamada da função.

    Este é o problema. Após a mudança e o teste por gentileza nos diga se funcionou para encerrarmos a thread ;)

    Abs


    Alexandre Felipe Malavasi Cardoso

    quinta-feira, 1 de agosto de 2013 02:30
  • Desculpa ter incomodado Alexandre agradeço pela a ajuda e principalmente pela paciência. Funcionou perfeitamente

    Valeu mesmo.

     
    quinta-feira, 1 de agosto de 2013 02:39
  • Imagina, não foi incômodo algum.

    Fico feliz em ter ajudado. Abs.


    Alexandre Felipe Malavasi Cardoso

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