terça-feira, 22 de julho de 2014

Como usar mascara em layouts com Bootstrap.




Ambiente:
Facelets
JSF Mojarra 2.0.6
PrimeFaces 3.5.4
Bootstrap v2.3.2

Para inclusão de mascaras de campos faça da seguinte forma:

Primeiramente devemos fazer o download da biblioteca maskedinput.js.
Depois do download salve na pasta dentro do projeto onde desejar.
Para o exemplo abaixo foi saldo em "Webcontext\js".
Incluir a linha abaixo em seu html.
<script src="${request.contextPath}/js/jquery.maskedinput.js"></script>

Em cada página deve ser usada a linha:
<script type="text/javascript">
jQuery(function($){
$("#ddd1").mask("99");
$("#telefone1").mask("9999-9999");
$("#cep").mask("99999-999");
$("#cpfAssina").mask("999.999.999-99");
});
</script>
Sendo que #cpfAssina esta referenciando um input por ID = "cpfAssina".
<p:inputText id="cpfAssina" value="#{cadastroEscolaCtrl.escola.cpfAssina}" label="CPF" required="true" pt:placeholder="CPF" styleClass="input-block-level"/>

Ainda vale a pena lembrar que para que seja possível nomear os componentes JSF sem que percam os IDS, é necessário acrescentar no form o atributo prependId="false".
Exemplo:
<h:form styleClass="form-login form-wrapper" prependId="false">

Simples assim.

Abraços...

Nenhum comentário:

Postar um comentário