Mentawai Web Framework

A tag inputMask (Caixa de texto com mascara de entrada)


A tag InputMask e uma caixa de texto com mascara de entrada. Algumas mascaras ja estão definidas, mais você pode definir suas proprias mascaras sem problemas.

Requisitos

Para a utilização da tag inputMask, você deve adicionar a sua tag de configuração, que e representada pela tag:<mtw:inputMaskConfig />, que deve ser colocada entre as tags <head></head>, caso não seja feito isso o componente não funcionará corretamente.

Exemplo de Configuração

<%@taglib uri="/WEB-INF/lib/mentawai.jar" prefix="mtw"%>
<%@ page language="java" import="java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <mtw:inputMaskConfig />
  </head>
  <body>
  ....   
  </body>
</html>
A tag <mtw:inputMaskConfig /> e responsavel por importar os arquivos .js que são utilizados para geração da mascara de entrada.

Obs: Este arquivo .js utilizado e copiado para um diretório que e criado no root da aplicação de forma automatica feita pelo proprio componente, evitando assim quaisquer erros de configuração.

Atributos

Nome Descrição Requerido Tipo
name Representa o atributo name do html Sim String
id Representa o atributo id do html Não String
klass Representa o atributo class do html Não String
klassStyle Representa o atributo style do html Não String
disabled Representa o atributo disabled do html Não String
maxlength Representa o atributo maxlength do html Não Integer
onblur Representa o evento Javascript onblur do html Não String
onchange Representa o evento Javascript onchange do html Não String
onclick Representa o evento Javascript onclick do html Não String
ondblclick Representa o evento Javascript ondblclick do html Não String
onfocus Representa o evento Javascript onfocus do html Não String
onkeydown Representa o evento Javascript onkeydown do html Não String
onkeypress Representa o evento Javascript onkeypress do html Não String
onkeyup Representa o evento Javascript onkeyup do html Não String
onmousedown Representa o evento Javascript onmousedown do html Não String
onmousemove Representa o evento Javascript onmousemove do html Não String
onmouseout Representa o evento Javascript onmouseout do html Não String
onmouseover Representa o evento Javascript onmouseover do html Não String
onmouseup Representa o evento Javascript onmouseup do html Não String
readonly Representa o atributo readonly do html Não String
size Representa o atributo size do html Não Integer
title Representa o atributo title do html Não String
value Representa o atributo value do html Não String
textAlign Alinha o texto do campo a direita, esquerda e centralizado
ex: text-align="left" (alinha à esquerda).
text-align="right" (alinha à direita).
text-align="center" (alinha centralizado).
Não String
maskDefined Este atributo e para passar as mascaras que ja estão definidas no compoente, que são elas:CEP, CNPJ, CPF, FONE. ex:
maskDefined="CEP" (saida na digitação: 00.000-000)
maskDefined="CNPJ" (saida na digitação: 00.000.000/0000-00)
maskDefined="CEP" (saida na digitação: 000.000.000-00)
maskDefined="FONE" (saida na digitação: (00)0000-0000)		 Não String
maskCustom Este atributo e para que você possa informar sua mascara de entrada personalizada, mais para isso algumas regras deverão ser seguidas, que são elas:

Regras Padrões

Carateres Descrição
a Permite a digitação de A-Z e 0-9
A Permite a digitação de A-Z, acentos e 0-9
9 Permite a digitação de 0-9
C Permite a digitação de A-Z e acentos
c Permite a digitação de A-Z
* Permite a digitação de qualquer coisa

Regras Especiais

Carateres Descrição
E (Except) exceção
O (Only) somente

Criação de Mascaras

Máscara simples:Nesse tipo de máscara o usuário pode digitar no máximo a mesma quantidade de caracteres que a máscara contém.
Exemplo:
Telefone =(99)9999-9999(maskDefined="FONE")
Data =99/99/9999

Máscara especial "regra^exceções":Esse tipo de máscara é composto por 2 partes, separadas por "^", o lado esquerdo especifica a regra e o direito as exceções para a regra selecionada.
Exemplo:
Carateres Descrição
9^abc Permite a digitação de números "9" e a exceção são os caracteres a, b e c
c^123 Permite a digitação de caracteres de a-z e a exceção são os números 1, 2 e 3

Uso das regras especiais: ela é semelhante a máscara especial, porém o lado esquerdo tem um significado diferente, podendo ser "E" (qualquer coisa, exceto...) ou "O" (somente...)
Exemplo:
E^abc: aceita qualquer coisa, menos a, b e c
O^123: só permite os caracteres 1, 2 e 3
Carateres Descrição
E^abc Permite a digitação de qualquer coisa, menos a, b e c
O^123 Permite a digitação de caracteres 1, 2 e 3

Não String

Lembrete

O inputMask deve ser adicionado entre entre as tags html <form>...</form>, conforme esta explicado abaixo no Exemplo na prática.

Exemplo na prática

  
<%@taglib uri="/WEB-INF/lib/mentawai.jar" prefix="mtw"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>InputMask</title>
    <mtw:inputMaskConfig />
</head>
<body>
  <form>
      <table align="left">
         <tr>
               <td>Mascaras Definidas:</td>
         </tr>
         <tr>
               <td>CEP</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="cep" size="20" textAlign="right"
                     maskDefined="CEP" /></td>
         </tr>
         <tr>
               <td>CNPJ</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="cnpj" size="20" textAlign="right"
                     maskDefined="CNPJ" /></td>
         </tr>
         <tr>
               <td>FONE</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="fone" size="20" textAlign="right"
                     maskDefined="FONE" /></td>
         </tr>
         <br>
         <tr>
               <td><b>MaskCustom:</b></td>
         </tr>
         <tr>
               <td>Placa do Veiculo ("ccc-9999")</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="placaVeiculo" size="20" textAlign="right"
                     maskCustom="ccc-9999" /></td>
         </tr>
         <tr>
               <td>Permite somente 0-9 e a,b,c ("9^abc")</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="maskCustom1" size="20" textAlign="right"
                     maskCustom="9^abc" /></td>
         </tr>
         <tr>
               <td>Permite a digitação de caracteres de a-z e a exceção são os
               números 1, 2 e 3 ("c^123")</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="maskCustom2" size="20" textAlign="right"
                     maskCustom="c^123" /></td>
         </tr>
         <tr>
               <td>Permite a digitação de qualquer coisa, menos a, b e c ("E^abc")</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="maskCustom3" size="20" textAlign="right"
                     maskCustom="E^abc" /></td>
         </tr>
         <tr>
               <td>Permite a digitação de caracteres 1, 2 e 3 ("O^123")</td>
         </tr>
         <tr>
               <td><mtw:inputMask name="maskCustom4" size="20" textAlign="right"
                     maskCustom="O^123" /></td>
         </tr>
      </table>
   </form>
</body>
</html>