DivulgaMask - Máscaras de uma forma SIMPLIFICADA

[Lucas WDM 0]

Estava em casa sem nada pra fazer, e precisando de algo do tipo, resolvi brincar um pouco.

 

Função que cria regras de Máscaras para elementos do tipo <INPUT TYPE="TEXT">

 

 

Usagem:

<input type="text" DivulgaMask="alphanum" DivulgaCharException=".- " DivulgaMaskFormat="###.###.###-##" DivulgaMaxLength="14">

Explicando as Propriedades:

 

DivulgaMask - Pode ter essas possibilidades: alpha (apenas letras) ,num (apenas numeros) ,alphanum(letras e numeros);

 

DivulgaCharException - Caracteres que não fazer parte do "DivulgaMask" porém, devem ser considerados

 

DivulgaMaskFormat - Formata o Campo a partir d'uma máscara. Utilize o metacaracter '#' para indicar QUALQUER_PEDAÇO_DE_STRING;

 

DivulgaMaxLength - Propriedade IGUAL a MaxLenght do HTML normal. Limita a quantidade de caracteres.

 

Para usar essa função, você deve carregá-la antes de tudo...

 

como fazer isso?

 

window.onload =	function(){DivulgaMask();}

//Author: Lucas Fonseca Mariano <lucas@luigs.com.br> - www.DIVULGASOFT.com.br//Licença: USE E ABUSE :)var er = "";function in_array(v_array,param){	var x = v_array.length;	for(i=0;i<x;i++)	{		if(v_array[i]==param)		{			return true;		}	}	return false;}function DivulgaMask(){		ELEMENTOS_DISPONIVEIS = document.getElementsByTagName("input");	for (var i = 0; i < ELEMENTOS_DISPONIVEIS.length; i ++)	{		a = ELEMENTOS_DISPONIVEIS[i];		if(a.getAttribute("DivulgaMask")=="num")		{			er = /^[0-9]$/;			DivulgaMask_VALIDATE(a);		}		if(a.getAttribute("DivulgaMask")=="alpha")		{			er = /^[a-z-A-Z]$/;			DivulgaMask_VALIDATE(a);		}		if(a.getAttribute("DivulgaMask")=="alphanum")		{			er = /^[a-z-A-Z-0-9]$/;			DivulgaMask_VALIDATE(a);		}	}}function DivulgaMask_MAX_LENGTH(a){	max_length = parseInt(a.getAttribute("DivulgaMaxLength"));	a.value = a.value.substr(0,max_length);}function DivulgaMask_FORMAT(a){	if(a.getAttribute("DivulgaMaskFormat"))	{		mask = a.getAttribute("DivulgaMaskFormat");		mask = mask.split('');		qtde_mask = mask.length;		var tmp = a.value.split('');		var x = tmp.length;		var saida = '#';		var SAIDA_GERAL = "";		if(qtde_mask>=x)		{			for(i=0;i<x;i++)			{				if(mask[i]==undefined)				{					break;				}				var texto = mask[i];				if (mask[i] == saida) 				{					SAIDA_GERAL += tmp[i];				}				else				{					SAIDA_GERAL  += mask[i];				}									if (mask[i+1] != saida) 				{					SAIDA_GERAL += mask[i+1];					i++;				}			}					a.value = SAIDA_GERAL;		}	}}function DivulgaMask_VALIDATE(a){	if(a.getAttribute("DivulgaCharException"))	{		StringsPermitidas = a.getAttribute("DivulgaCharException");		StringsPermitidas = StringsPermitidas.split('');	}		else	{		StringsPermitidas = new Array();	}	function _generic(__CONSTRUCT__)	{		tmp = __CONSTRUCT__.value;		tmp2 = tmp.length;		tmp3 = tmp.split('');		var pode = true;		var tmp4 = "";		for( x = 0; x < tmp2; x++ )		{			CHAR = tmp3[x];			testador = er.test(CHAR);			if(!testador && (!in_array(StringsPermitidas,CHAR)))			{				pode = false;			}			else			{				tmp4 += CHAR;			}		}		__CONSTRUCT__.value = tmp4;		DivulgaMask_FORMAT(__CONSTRUCT__);		DivulgaMask_MAX_LENGTH(__CONSTRUCT__);	}	a.onkeyup = function(e)	{		_generic(this);	}	a.onfocus = function(e)	{		_generic(this);	}	a.onblur = function(e)	{		_generic(this);	}	a.onkeypress = function(e)	{		_generic(this);	}}

Caso alguém encontre algum BUG ( o que não é muito dificil ), sinta-se em casa para compartilhar com a galera!

 

Vlw !!!

[Lucas WDM 0]

Pois eh....pensei nisso quando estava desenvolvendo...Porém, existe pessoas que pensam mais em acessibilidade e contorno de problemas do que ficar "esquentando a cabeça" com validação na W3C.Mas alguém tem alguma idéia de como resolver esse "problema" ?Gosto sempre de fazer as coisas mais genéricas possíveis.

[Roney 0]

Oi Lucas.

Show de bola essa tua função.

Só que para mim está dando um pequeno problema... quando utilizo a máscara em mais de um campo, sendo que por exemplo, o 1o. campo é alphanum e o segundo é num, a validação utilizada é sempre a do segundo, ou seja, não consigo colocar letras.

Como aparentemente a função está utilizando a máscara da regexp do último campo, contornei utilizando o seguinte:

 

function DivulgaMask_VALIDATE(a){	if(a.getAttribute("DivulgaCharException"))	{		StringsPermitidas = a.getAttribute("DivulgaCharException");		StringsPermitidas = StringsPermitidas.split('');	}		else	{		StringsPermitidas = new Array();	}	a.setAttribute('_RegularExpression', er);	function _generic(__CONSTRUCT__)	{		tmp = __CONSTRUCT__.value;		tmp2 = tmp.length;		tmp3 = tmp.split('');	er = a.getAttribute('_RegularExpression');		var pode = true;		var tmp4 = "";		for( x = 0; x < tmp2; x++ )		{			CHAR = tmp3[x];			testador = er.test(CHAR);			if(!testador && (!in_array(StringsPermitidas,CHAR)))			{				pode = false;			}			else			{				tmp4 += CHAR;			}		}		__CONSTRUCT__.value = tmp4;		DivulgaMask_FORMAT(__CONSTRUCT__);		DivulgaMask_MAX_LENGTH(__CONSTRUCT__);	}	a.onkeyup = function(e)	{		_generic(this);	}	a.onfocus = function(e)	{		_generic(this);	}	a.onblur = function(e)	{		_generic(this);	}	a.onkeypress = function(e)	{		_generic(this);	}}

Só testei no IE, não se se funciona em outros browsers.

Abs.

[Niltojal 0]

tudo muito bem ..tudo muito bom....mas teve um probleminha pelo menos comigo aqui no firefox... quando uma pessoa erra nadigitação e tenta apagar o que esta no campo, a mascara não deixa...ou seja deu pau no backspace....ja tentei ver como que faz para solucionar isso mas ate agora nada ..alguem ai sabe...ah isso so acontece no firefox no ie ta beleza