none
Mascara para Telefone (JavaScript) RRS feed

  • Pergunta


  • Salve desenvolvedores...
    Alguém sabe de algum artigo ou função pronta javascript para Validar a entrada de telefone do usuário (00)0000-0000

    Sendo que a medida que o usuário for digitando a função já insere os parenteses e o traço...

    Desde já agradeço...
    quinta-feira, 11 de janeiro de 2007 14:52

Respostas

  • Marcus,

    É tranquilo fazer isso, tente algo do tipo:

    function Mascara(objeto){
       if(objeto.value.length == 0)
         objeto.value = '(' + objeto.value;

       if(objeto.value.length == 3)
          objeto.value = objeto.value + ')';

     if(objeto.value.length == 8)
         objeto.value = objeto.value + '-';
    }

    E pra chamar use:
    <input type="text" onkeypress="Mascara(this);">

    Dá pra melhorar um bocado fiz isso agora.


    Espero ter ajudado.
    Se o post foi válido qualifique como tal para o bom andamento do forúm

    []'s

    quinta-feira, 11 de janeiro de 2007 20:40

Todas as Respostas

  • Marcus,

    É tranquilo fazer isso, tente algo do tipo:

    function Mascara(objeto){
       if(objeto.value.length == 0)
         objeto.value = '(' + objeto.value;

       if(objeto.value.length == 3)
          objeto.value = objeto.value + ')';

     if(objeto.value.length == 8)
         objeto.value = objeto.value + '-';
    }

    E pra chamar use:
    <input type="text" onkeypress="Mascara(this);">

    Dá pra melhorar um bocado fiz isso agora.


    Espero ter ajudado.
    Se o post foi válido qualifique como tal para o bom andamento do forúm

    []'s

    quinta-feira, 11 de janeiro de 2007 20:40
  • Diego,

     

    Comeu eu faço exatamente, eu nao estou conseguindo aplicar isto ao meu codigo? Esse codigo é java script e como e cloloco ele em pratica no meu form?

     

    function Mascara(objeto){
       if(objeto.value.length == 0)
         objeto.value = '(' + objeto.value;

       if(objeto.value.length == 3)
          objeto.value = objeto.value + ')';

     if(objeto.value.length == 8)
         objeto.value = objeto.value + '-';
    }

     

    e esse eu coloco junto ao meu texbox?

    que no meu codigo eu encontro ele assim:

    <InsertItemTemplate>

    Site:

    <asp:TextBox ID="SiteTextBox" runat="server" Text='<%# Bind("Site") %>'></asp:TextBox><br />

    Cliente:

    <asp:DropDownList ID="ClienteTextBox" runat="server" SelectedValue='<%# Bind("Cliente") %>'>

    <asp:ListItem Selected="True">Contax</asp:ListItem>

    <asp:ListItem>Telemar</asp:ListItem>

    <asp:ListItem>CIOP</asp:ListItem>

    <asp:ListItem>Amazonia Celular</asp:ListItem>

    <asp:ListItem>TIM</asp:ListItem>

    </asp:DropDownList><br />

    Endereco:

    <asp:TextBox ID="EnderecoTextBox" runat="server" Text='<%# Bind("Endereco") %>'></asp:TextBox><br />

    Bairro:

    <asp:TextBox ID="BairroTextBox" runat="server" Text='<%# Bind("Bairro") %>'></asp:TextBox><br />

    Cidade:

    <asp:TextBox ID="CidadeTextBox" runat="server" Text='<%# Bind("Cidade") %>'></asp:TextBox><br />

    Estado:

    <asp:TextBox ID="EstadoTextBox" runat="server" Text='<%# Bind("Estado") %>'></asp:TextBox><br />

    CEP:

    <asp:TextBox ID="CEPTextBox" runat="server" Text='<%# Bind("CEP") %>'></asp:TextBox><br />

    NomeContato:

    <asp:TextBox ID="NomeContatoTextBox" runat="server" Text='<%# Bind("NomeContato") %>'></asp:TextBox><br />

    TelFixo:

    <asp:TextBox ID="TelFixoTextBox" runat="server" Text='<%# Bind("TelFixo") %>'></asp:TextBox><br />

    TelCelular:

    <asp:TextBox ID="TelCelularTextBox" runat="server" Text='<%# Bind("TelCelular") %>'></asp:TextBox><br />

    SLA:

    <asp:TextBox ID="SLATextBox" runat="server" Text='<%# Bind("SLA") %>'></asp:TextBox><br />

    <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"

    Text="Insert"></asp:LinkButton>

    <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"

    Text="Cancel"></asp:LinkButton>

    </InsertItemTemplate>

     

    Obrigado,

    segunda-feira, 29 de janeiro de 2007 17:09
  • Leandro,

    No seu caso acho q o melhor ate pra facilitar seu entendimento é vc usar o evento RowDataBound do seu gridview.

    Nele vc vai fazer o seguinte adicionar um atributo javascript ao seu controle assim:


    TextBox texto = (TextBox) e.Row.FindControl("TelFixoTextBox");
    texto.Attributes.Add("onkeypress","Mascara(this);");

    Seguem alguns links para ficar como referencia de como usar o evento RowDataBound:
    http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowdatabound.aspx
    http://forums.microsoft.com/MSDN-BR/ShowPost.aspx?PostID=662638&SiteID=21


    Espero ter ajudado


    []'s
    segunda-feira, 29 de janeiro de 2007 20:11
  • tentar simplesmente colocar o onkeypress="Mascara(this); na tag do textBox do telefone:

    <asp:TextBox ID="TelFixoTextBox" runat="server" Text='<%# Bind("TelFixo") %>' onkeypress= Mascara(this);"></asp:TextBox>

    acredito que isso já deva funcinar.
    quarta-feira, 31 de janeiro de 2007 13:38
  • Diego,

     

    Comeu eu faço exatamente, eu nao estou conseguindo aplicar isto ao meu codigo? Esse codigo é java script e como e cloloco ele em pratica no meu form?

     

    function Mascara(objeto){
       if(objeto.value.length == 0)
         objeto.value = '(' + objeto.value;

       if(objeto.value.length == 3)
          objeto.value = objeto.value + ')';

     if(objeto.value.length == 8)
         objeto.value = objeto.value + '-';
    }

     

    e esse eu coloco junto ao meu texbox?

    que no meu codigo eu encontro ele assim:

    < InsertItemTemplate >

    Site:

    < asp : TextBox ID ="SiteTextBox" runat ="server" Text =' <%# Bind("Site") %> '></ asp : TextBox >< br />

    Cliente:

    < asp : DropDownList ID ="ClienteTextBox" runat ="server" SelectedValue =' <%# Bind("Cliente") %> '>

    < asp : ListItem Selected ="True"> Contax </ asp : ListItem >

    < asp : ListItem > Telemar </ asp : ListItem >

    < asp : ListItem > CIOP </ asp : ListItem >

    < asp : ListItem > Amazonia Celular </ asp : ListItem >

    < asp : ListItem > TIM </ asp : ListItem >

    </ asp : DropDownList >< br />

    Endereco:

    < asp : TextBox ID ="EnderecoTextBox" runat ="server" Text =' <%# Bind("Endereco") %> '></ asp : TextBox >< br />

    Bairro:

    < asp : TextBox ID ="BairroTextBox" runat ="server" Text =' <%# Bind("Bairro") %> '></ asp : TextBox >< br />

    Cidade:

    < asp : TextBox ID ="CidadeTextBox" runat ="server" Text =' <%# Bind("Cidade") %> '></ asp : TextBox >< br />

    Estado:

    < asp : TextBox ID ="EstadoTextBox" runat ="server" Text =' <%# Bind("Estado") %> '></ asp : TextBox >< br />

    CEP:

    < asp : TextBox ID ="CEPTextBox" runat ="server" Text =' <%# Bind("CEP") %> '></ asp : TextBox >< br />

    NomeContato:

    < asp : TextBox ID ="NomeContatoTextBox" runat ="server" Text =' <%# Bind("NomeContato") %> '></ asp : TextBox >< br />

    TelFixo:

    < asp : TextBox ID ="TelFixoTextBox" runat ="server" Text =' <%# Bind("TelFixo") %> '></ asp : TextBox >< br />

    TelCelular:

    < asp : TextBox ID ="TelCelularTextBox" runat ="server" Text =' <%# Bind("TelCelular") %> '></ asp : TextBox >< br />

    SLA:

    < asp : TextBox ID ="SLATextBox" runat ="server" Text =' <%# Bind("SLA") %> '></ asp : TextBox >< br />

    < asp : LinkButton ID ="InsertButton" runat ="server" CausesValidation ="True" CommandName ="Insert"

    Text ="Insert"></ asp : LinkButton >

    < asp : LinkButton ID ="InsertCancelButton" runat ="server" CausesValidation ="False" CommandName ="Cancel"

    Text ="Cancel"></ asp : LinkButton >

    </ InsertItemTemplate >

     

    Obrigado,

    Diego no código Java vc precisa abri-lo e fecha-lo fica assim:

    <script language="JavaScript">
    <!--

    function Mascara(objeto){
       if(objeto.value.length == 0)
         objeto.value = '(' + objeto.value;

       if(objeto.value.length == 3)
          objeto.value = objeto.value + ')';

     if(objeto.value.length == 8)
         objeto.value = objeto.value + '-';
    }
    //-->
    </script>


    E no campo fica assim:
    <input type="text" onkeypress="Mascara(this);" name=Telefones <---- esse é o nome do meu campo
                class=campo-branco size=12>

    Espero ter ajudado



    quarta-feira, 17 de junho de 2009 14:28
  • Olá Diego Dias,


    Estava com a mesma dúvida que Marcos Ghelli, porem consegui utilizando seu código Java script, funciona direitinho, mas o que acontece é que depois que você digitar alguns caracteres, caso ocorra algum erro e o você queira apagar, o código Java script não deixa você limpar todos os caracteres, como faço para resolver isso.

    Logo a baixo segue o meu código para você analisar.

    <script type="text/javascript">
         
            function MascaraProtocolo(objeto){           
                    if(objeto.value.length == 6)
                       objeto.value = objeto.value + '/';
            }

    </script>

    Para chamar a função.
    <input type="text" id="numero" name="numero" onkeypress="MascaraProtocolo(this)"  maxlength="11"  size="12%" value="<%=m_numero%>"/>

    Nesse meu caso estou utilizando para colocar um número de protocolo que utilizo na empresa que trabalho.


    A penas para colocar um barra depois do sexto dígito, caso queira remover todos os dígitos, não é possível, apenas os quatro últimos, como posso resolver?

    Desde já fico muito grato pela ajudar.

    • Editado Heberton Melo terça-feira, 7 de julho de 2009 16:52 Formatação
    terça-feira, 7 de julho de 2009 16:50
  • Meus Parabéns, e muito obrigado! Cara você me ajudou e muitoooooooooooooooooooooooooooooooooooooooooooooo
    sexta-feira, 22 de julho de 2011 13:25
  • Diego Dias, Muito obrigado..

     

    Estava precisando colocar mascara no campo telefone...

    sua dica foi perfeita...

    sexta-feira, 22 de julho de 2011 13:26