Create mask for fields

Asked

Viewed 1,615 times

1

I am developing a system and in it I need to create mask for some fields, the problem that this system was started in a somewhat old version, I can’t say for sure what it is but I will be posting some code to see if you can help me.

I tried some tests putting Javascript but when I test does not work.

Follows:

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
    <jsp:directive.page contentType="text/html; charset=ISO-8859-1" import="java.sql.*" language="java" pageEncoding="UTF-8"/>
    <f:view>
        <webuijsf:page id="page1">
            <webuijsf:html id="html1">
                <webuijsf:head id="head1">
                    <webuijsf:link id="link1" url="/resources/stylesheet.css"/>
                </webuijsf:head>
                <webuijsf:body id="body1" style="-rave-layout: grid">
                    <webuijsf:form id="form1">
                        <webuijsf:messageGroup id="messageGroup1" style="height: 310px; left: 138px; top: 241px; position: absolute; text-align: center; vertical-align: top; width: 197px; z-index: 508"/>
                        <webuijsf:staticText id="staticText1"
                            style="color: rgb(0, 51, 153); font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold; left: 365px; top: 82px; position: absolute; z-index: 502" text="CADASTRO DE CLIENTES"/>
                        <div style="left: 138px; top: -1px; position: absolute">
                            <jsp:directive.include file="menu_superior.jspf"/>
                        </div>
                        <div style="left: 138px; top: 23px; position: absolute">
                            <jsp:directive.include file="menu_icones.jspf"/>
                        </div>
                        <div style="left: 140px; top: 70px; position: absolute; z-index: 503">
                            <jsp:directive.include file="menu_clientes.jspf"/>
                        </div>
                        <webuijsf:staticText id="staticText2"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 366px; top: 110px; position: absolute; z-index: 504" text="CPF*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.cpf3}" columns="14" id="cpf3" maxLength="14"
                            style="left: 365px; top: 127px; position: absolute; z-index: 504" tabIndex="1" valueChangeListenerExpression="#{administracao$cad_cliente.cpf3_processValueChange}"/>
                        <webuijsf:staticText id="staticText3"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 492px; top: 110px; position: absolute; z-index: 504" text="Nome completo*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.nome1}" columns="60" id="nome1"
                            onBlur="DynaFaces.Tx.fire(&quot;ajaxTransaction1&quot;, &quot;nome&quot;)"
                            style="left: 488px; top: 127px; position: absolute; z-index: 504" tabIndex="2" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText4" style="left: 361px; top: 166px; position: absolute; z-index: 504" text="Data Nascimento"/>
                        <webuijsf:staticText id="staticText5"
                            style="color: rgb(255, 51, 0); font-weight: bold; height: 18px; left: 548px; top: 164px; position: absolute; z-index: 504" text="Sexo*"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.sexo1}" id="sexo1"
                            items="#{administracao$cad_cliente.sexo1DefaultOptions.options}" style="left: 547px; top: 181px; position: absolute; z-index: 504" tabIndex="5"/>
                        <webuijsf:staticText id="staticText6"
                            style="color: rgb(0, 0, 0); font-weight: normal; left: 655px; top: 166px; position: absolute; z-index: 504" text="Estado Civil"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.profissao1}" columns="50" id="profissao1"
                            style="left: 804px; top: 179px; position: absolute; z-index: 504" tabIndex="7" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText7" style="left: 806px; top: 163px; position: absolute; z-index: 504" text="Profissão"/>
                        <webuijsf:staticText id="staticText8"
                            style="font-size: 10px; font-weight: bold; left: 365px; top: 229px; position: absolute; z-index: 504" text="ENDEREÇO"/>
                        <webuijsf:staticText id="staticText9"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 368px; top: 256px; position: absolute; z-index: 504" text="Logradouro*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.lougradouro1}" columns="60" id="lougradouro1"
                            style="left: 365px; top: 274px; position: absolute; z-index: 504" tabIndex="8" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.numero1}" columns="10"
                            converter="#{administracao$cad_clinica.integerConverter1}" id="numero1"
                            style="left: 770px; top: 274px; position: absolute; z-index: 504" tabIndex="9" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText10"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 774px; top: 257px; position: absolute; z-index: 504" text="Número*"/>
                        <webuijsf:staticText id="staticText11" style="left: 890px; top: 257px; position: absolute; z-index: 504" text="Complemento"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.complement1}" id="complement1"
                            style="left: 889px; top: 272px; position: absolute; z-index: 504" tabIndex="10"/>
                        <webuijsf:staticText id="staticText12"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 1073px; top: 251px; position: absolute; z-index: 504" text="Estado*"/>
                        <webuijsf:staticText id="staticText13"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 370px; top: 314px; position: absolute; z-index: 504" text="Bairro*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.bairro1}" columns="50" id="bairro1"
                            style="left: 368px; top: 329px; position: absolute; z-index: 504" tabIndex="12" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText14"
                            style="color: rgb(255, 51, 0); font-weight: bold; height: 15px; left: 715px; top: 312px; position: absolute; z-index: 504" text="Cidade*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.cidade1}" columns="50" id="cidade1"
                            style="left: 715px; top: 329px; position: absolute; z-index: 504" tabIndex="13" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText15" style="left: 1053px; top: 313px; position: absolute; z-index: 504" text="CEP"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.cep1}" columns="8" id="cep1"
                            style="left: 1051px; top: 326px; position: absolute; z-index: 504" tabIndex="14"/>
                        <webuijsf:staticText id="staticText16" style="font-size: 10px; left: 1052px; top: 343px; position: absolute; width: 91px; z-index: 504" text="somente numeros"/>
                        <webuijsf:staticText id="staticText17"
                            style="font-size: 10px; font-weight: bold; left: 366px; top: 383px; position: absolute; z-index: 504" text="TELEFONES"/>
                        <webuijsf:staticText id="staticText18"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 368px; top: 408px; position: absolute; z-index: 504" text="DDD"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.DDD1}" columns="2" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="DDD1" maxLength="3" style="left: 368px; top: 425px; position: absolute; z-index: 504" tabIndex="15" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText19"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 398px; top: 407px; position: absolute; z-index: 504" text="Número*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.tel1}" columns="8" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="tel1" maxLength="9" style="left: 394px; top: 425px; position: absolute; z-index: 504" tabIndex="16" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText20" style="font-size: 10px; left: 367px; top: 445px; position: absolute; width: 91px; z-index: 504" text="somente numeros"/>
                        <webuijsf:staticText id="staticText21" style="height: 23px; left: 474px; top: 407px; position: absolute; width: 27px; z-index: 504" text="Tipo"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.tipotel1}" id="tipotel1"
                            items="#{administracao$cad_cliente.tipotel1DefaultOptions.options}"
                            style="left: 475px; top: 423px; position: absolute; z-index: 504" tabIndex="17" valueChangeListenerExpression="#{administracao$cad_cliente.tipotel1_processValueChange}"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.DDD2}" columns="2" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="DDD2" maxLength="3" style="left: 603px; top: 422px; position: absolute; z-index: 504" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText22" style="left: 603px; top: 405px; position: absolute; z-index: 504" text="DDD"/>
                        <webuijsf:staticText id="staticText23" style="left: 633px; top: 404px; position: absolute; z-index: 504" text="Número"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.tel2}" columns="8" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="tel2" maxLength="9" style="left: 629px; top: 422px; position: absolute; z-index: 504" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText24" style="height: 23px; left: 709px; top: 402px; position: absolute; width: 27px; z-index: 504" text="Tipo"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.tipotel2}" id="tipotel2"
                            items="#{administracao$cad_cliente.tipotel2DefaultOptions.options}" style="left: 707px; top: 420px; position: absolute; z-index: 504"/>
                        <webuijsf:staticText id="staticText25" style="left: 833px; top: 406px; position: absolute; z-index: 504" text="DDD"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.DDD3}" columns="2" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="DDD3" maxLength="3" style="left: 833px; top: 422px; position: absolute; z-index: 504" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText26" style="left: 861px; top: 406px; position: absolute; z-index: 504" text="Número"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.tel3}" columns="8" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="tel3" maxLength="9" style="left: 857px; top: 422px; position: absolute; z-index: 504" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText27" style="height: 23px; left: 953px; top: 398px; position: absolute; width: 27px; z-index: 504" text="Tipo"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.tipotel3}" id="tipotel3"
                            items="#{administracao$cad_cliente.tipotel3DefaultOptions.options}" style="left: 953px; top: 422px; position: absolute; z-index: 504"/>
                        <webuijsf:pageSeparator id="pageSeparator2" style="left: 327px; top: 448px; position: absolute; width: 911px; z-index: 504"/>
                        <webuijsf:staticText id="staticText28"
                            style="color: #000000; font-weight: normal; left: 385px; top: 772px; position: absolute; z-index: 504" text="E-mail"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.email1}" columns="60" id="email1"
                            style="left: 381px; top: 789px; position: absolute; z-index: 504" tabIndex="30" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText29"
                            style="color: #000000; font-weight: normal; left: 776px; top: 771px; position: absolute; z-index: 504" text="Como conheceu o escritório?"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.indicado1}" columns="60" id="indicado1"
                            style="left: 776px; top: 789px; position: absolute; z-index: 504" tabIndex="32" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.tipo_indicado}" id="tipo_indicado"
                            items="#{administracao$cad_cliente.tipo_indicadoDefaultOptions.options}"
                            style="left: 929px; top: 768px; position: absolute; z-index: 504" tabIndex="31"/>
                        <webuijsf:textArea binding="#{administracao$cad_cliente.observacoes1}" columns="60" id="observacoes1" rows="3"
                            style="left: 379px; top: 836px; position: absolute; z-index: 504" tabIndex="33"/>
                        <webuijsf:staticText id="staticText30" style="left: 381px; top: 819px; position: absolute; z-index: 504" text="Observações"/>
                        <webuijsf:button actionExpression="#{administracao$cad_cliente.btn_salvar_action}" id="btn_salvar1"
                            style="font-size: 12px; font-weight: bold; height: 50px; left: 1045px; top: 852px; position: absolute; width: 100px; z-index: 504"
                            tabIndex="34" text="SALVAR"/>
                        <webuijsf:button actionExpression="#{administracao$cad_cliente.btn_salvar1_action}" id="btn_limpar1"
                            style="font-size: 12px; font-weight: bold; height: 50px; left: 935px; top: 852px; position: absolute; width: 100px; z-index: 504"
                            tabIndex="35" text="LIMPAR"/>
                        <webuijsf:staticText id="staticText31"
                            style="font-size: 10px; font-weight: bold; left: 369px; top: 488px; position: absolute; z-index: 504" text="FILIAÇAO"/>
                        <webuijsf:staticText id="staticText32" style="left: 372px; top: 508px; position: absolute; z-index: 504" text="Mãe"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.mae}" columns="50" id="mae"
                            style="left: 370px; top: 524px; position: absolute; z-index: 504" tabIndex="18" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText33"
                            style="color: #000000; font-weight: normal; left: 802px; top: 505px; position: absolute; z-index: 504" text="Pai"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.pai}" columns="50" id="pai"
                            style="left: 800px; top: 521px; position: absolute; z-index: 504" tabIndex="19" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:pageSeparator id="pageSeparator3" style="left: 333px; top: 543px; position: absolute; width: 904px; z-index: 504"/>
                        <webuijsf:staticText id="staticText34"
                            style="font-size: 10px; font-weight: bold; left: 374px; top: 574px; position: absolute; z-index: 504" text="DOCUMENTOS"/>
                        <webuijsf:staticText id="staticText35" style="height: 15px; left: 378px; top: 595px; position: absolute; width: 124px; z-index: 504" text="Carteira de identidade"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.ci}" columns="10" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="ci" style="left: 379px; top: 613px; position: absolute; z-index: 511" tabIndex="20" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText36" style="height: 15px; left: 599px; top: 595px; position: absolute; width: 124px; z-index: 504" text="Carteira de trabalho"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.ctps}" converter="#{administracao$cad_clinica.integerConverter1}" id="ctps"
                            style="left: 600px; top: 613px; position: absolute; z-index: 504" tabIndex="21" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText37" style="height: 15px; left: 893px; top: 592px; position: absolute; width: 124px; z-index: 504" text="Nº do PIS"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.pis}" columns="10" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="pis" style="left: 894px; top: 610px; position: absolute; z-index: 504" tabIndex="23" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:pageSeparator id="pageSeparator4" style="left: 330px; top: 622px; position: absolute; width: 909px; z-index: 504"/>
                        <webuijsf:staticText id="staticText38"
                            style="font-size: 10px; font-weight: bold; left: 379px; top: 664px; position: absolute; z-index: 504" text="DADOS BANCARIOS"/>
                        <webuijsf:staticText id="staticText39" style="height: 16px; left: 382px; top: 686px; position: absolute; width: 66px; z-index: 504" text="Nº do banco"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.num_banco}" columns="5"
                            converter="#{administracao$cad_clinica.integerConverter1}" id="num_banco"
                            style="left: 383px; top: 705px; position: absolute; z-index: 504" tabIndex="24" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText40" style="height: 20px; left: 502px; top: 681px; position: absolute; width: 120px; z-index: 504" text="Nome do banco"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.nome_banco}" columns="30"
                            converter="#{administracao$cad_clinica.integerConverter1}" id="nome_banco"
                            style="left: 503px; top: 702px; position: absolute; z-index: 504" tabIndex="25" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText41" style="height: 16px; left: 764px; top: 680px; position: absolute; width: 66px; z-index: 504" text="Agencia"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.agencia}" columns="10"
                            converter="#{administracao$cad_clinica.integerConverter1}" id="agencia"
                            style="left: 765px; top: 699px; position: absolute; z-index: 504" tabIndex="26" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText42" style="height: 16px; left: 886px; top: 677px; position: absolute; width: 66px; z-index: 504" text="Conta"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.conta}" columns="10" converter="#{administracao$cad_clinica.integerConverter1}"
                            id="conta" style="left: 887px; top: 696px; position: absolute; z-index: 504" tabIndex="27" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:staticText id="staticText43" style="height: 23px; left: 986px; top: 676px; position: absolute; width: 27px; z-index: 504" text="Tipo"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.tipo_conta}" id="tipo_conta"
                            items="#{administracao$cad_cliente.tipo_contaDefaultOptions.options}"
                            style="left: 984px; top: 694px; position: absolute; z-index: 504" tabIndex="28"/>
                        <webuijsf:staticText id="staticText44" style="height: 16px; left: 1095px; top: 675px; position: absolute; width: 54px; z-index: 504" text="Operaçao"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.operacao}" columns="5"
                            converter="#{administracao$cad_clinica.integerConverter1}" id="operacao"
                            style="left: 1096px; top: 694px; position: absolute; z-index: 504" tabIndex="29" valueChangeListenerExpression="#{administracao$cad_cliente.textField2_processValueChange}"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.estado1}" id="estado1"
                            items="#{administracao$cad_cliente.estado1DefaultOptions.options}"
                            style="left: 1072px; top: 268px; position: absolute; z-index: 507" tabIndex="11"/>
                        <webuijsf:pageSeparator id="pageSeparator5" style="left: 327px; top: 725px; position: absolute; width: 838px; z-index: 504"/>
                        <webuijsf:calendar binding="#{administracao$cad_cliente.data_nasc2}" dateFormatPatternHelp="dd/MM/yyyy" id="data_nasc2"
                            style="left: 360px; top: 180px; position: absolute; z-index: 505" tabIndex="4"/>
                        <webuijsf:dropDown binding="#{administracao$cad_cliente.estado_civil2}" id="estado_civil2"
                            items="#{administracao$cad_cliente.estado_civil2DefaultOptions.options}"
                            style="left: 654px; top: 181px; position: absolute; z-index: 506" tabIndex="6"/>
                        <webuijsf:panelLayout id="layoutPanel1" panelLayout="flow" style="background-color: rgb(234, 237, 239); height: 968px; left: 340px; top: 70px; position: absolute; width: 886px"/>
                        <webuijsf:staticText id="staticText45"
                            style="color: rgb(255, 51, 0); font-weight: bold; left: 896px; top: 107px; position: absolute; z-index: 504" text="Número da pasta*"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.tfPasta}" id="tfPasta" style="left: 896px; top: 127px; position: absolute" tabIndex="3"/>
                        <webuijsf:staticText id="staticText46" style="left: 779px; top: 594px; position: absolute; z-index: 510" text="Série"/>
                        <webuijsf:textField binding="#{administracao$cad_cliente.tfSerie}" columns="10" id="tfSerie"
                            style="left: 779px; top: 612px; position: absolute; z-index: 510" tabIndex="22"/>
                    </webuijsf:form>
                </webuijsf:body>
            </webuijsf:html>
        </webuijsf:page>
    </f:view>
</jsp:root>

This is the code of my page, as stated above I have tried to put even one alert basic to test and yet when I call the page nothing happens.

Note: I need to create mask for: CPF, CNPJ, CEP, Nº Process. I already know how to create the masks. The problem is only to call the Javascript function.

javascript java java-ee

3 answers

1

You can use the MASKED INPUT PLUGIN

See an example below:

jQuery(".cpf").mask("999.999.999-99");
jQuery(".cnpj").mask("99.999.999/9999-99");
jQuery(".cep").mask("99.999-999");
jQuery(".contrato").mask("99999.999/9999");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
CPF: <input type="text" class="cpf" /> <br>
CNPJ: <input type="text" class="cnpj" /> <br>
CEP: <input type="text" class="cep" /> <br>
CONTRATO: <input type="text" class="contrato" /> <br>

UPDATE

After including jQuery on your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

And the Masked Input plugin:

<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>

You must "start" jQuery:

jQuery(function(){
    /*Aqui você insere seu código*/    
});

This part of the "jQuery startup" must be inside a tag <script></script> or in an external file (best option).

  • The first part where you put: jQuery(".Cpf"). Mask("999.999.999-99"); jQuery(".cnpj"). Mask("99.999.999/9999-99"); jQuery(".cep"). Mask("99.999-999"); jQuery(".contract"). Mask("99999.999/9999"); Where should I put it? Enter <Script> tags? or anywhere ?

  • This is a Jquery plugin, so put inside the tag <script> on your page.

  • That’s what I did, but without success. When I call the page nothing happens.

  • I edited my answer, @Eugêniomichetti. Take a look.

  • @Thiagothaison I need to create a Function and no by an event in the textfield or so load the page already executes this code?

  • Once you load the page it already runs everything inside the jQuery(function(){...});

  • I’m putting it like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>&#Xa<script> jQuery("Document"). ready(Function() { jQuery("#cpf3").Mask("999.999.999-99"); }); </script>

  • That’s right, there is some element already created with the id=cpf3? Gives some error in the console?

  • There is no error in the console. Yes you have id cpf3. <webuijsf:textField Binding="#{administracao$cad_cliente.cpf3}" Columns="14" id="cpf3" maxlength="14" style="left: 365px; top: 127px; position: Absolute; z-index: 504" tabIndex="1" valueChangeListenerExpression="#{administration$cad_client.cpf3_processValueChange}"/>

  • Is there any element already created with id=cpf3?

  • as well as Elemento?

  • input, there is already an input with id=cpf3 or vc creates it after the page is loaded?

  • No input, that’s a jTextField.

Show 8 more comments

1

1

In order for the plugin to work, as @Thiado explained, you need to add the class corresponding to its elements:

<input type="text" class="cpf" />

Note the class attribute

class="cpf"

Which is then used as selector in the jQuery plugin:

jQuery(".cpf")...

You can also do this using the field id, in your case the CPF field has the id cpf3, then you could use:

jQuery("#cpf3").mask("999.999.999-99");

Only in this case, this mask will be applied only to this field.

  • I had already made this modification the problem I believe to be in the event. I will try to do otherwise to test.

  • You might want to define the execution of the function after the page is loaded, you can do this by doing: jQuery("Document"). ready(Function() { jQuery(". Cpf"). Mask("999.999.999-99"); });

  • I did as you reported but still not calling the mask.

Browser other questions tagged javascript java java-ee

You are not signed in. Login or sign up in order to post.