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 not say for sure what it is but I will be posting some code to see if You can help me.
I have tried to do some tests by putting the JavaScript but when I test it 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("ajaxTransaction1", "nome")"
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 already tried to put even a alert
basic to test and even when I call the page nothing happens.
Note: I need to create a mask for: CPF, CNPJ, CEP, Process No.. I already know how to make the masks. The problem is just calling the JavaScript function.