segunda-feira, 14 de maio de 2012

Formatar data e cpf no h:inputText

1. Primeiro crie um arquivo do tipo JavaScript file na sua IDE, depois copie o texto abaixo nele.

-- texto do javascript que será copiado dentro do arquivo --

function mascaraData(elemento, event){
    /* 8 = backspace; 9 = tab */
    if (event.keyCode == 8 || event.keyCode == 9)
        return true;


    if (elemento.value.length >= 10)
        return false;


    if (elemento.value.length == 2)
    {
        elemento.value +=  '/' ;
        return true;
    }
    else if (elemento.value.length == 5)
    {
        elemento.value += '/';
        return true;
    }
    return true;
}



function mascaraCPF(elemento, event)
{
    if (event.keyCode == 8 || event.keyCode == 9)
        return true;


    if (elemento.value.length >= 12)
        return false;


    else if (elemento.value.length == 9 && event.keyCode != 8)
    {
        elemento.value += '-';
        return true;
    }
    return true;
}


2. Adicione a referencia no seu template.

-- como ficará o <head> do seu site com a referencia do java script --
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="#{facesContext.externalContext.request.contextPath}/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/NOMEDOSEUJAVASCRIPT.js"/>
<title>titulo do seu site</title>
</head>


* Lembrando que você deve alterar o NOMEDOSEUJAVASCRIPT.js pelo nome do arquivo que você criou.

3. Adicionando o formato no h:inputText.

<h:inputText value="#{backbean.objeto.nascimento}" id="txtDtNascimento" onkeypress="return mascaraData(this, event)" converter="CalendarConverter"/>


<h:inputText value="#{backbean.objeto.cpf}" id="txtcpf" onkeypress="return mascaraCPF(this, event)"/>


Nenhum comentário:

Postar um comentário