Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wilker

mascaras - definitivo (data, cpf, rg, cep...)

Recommended Posts

Impressão minha ou ninguem comentou um putz código desse?

 

ó: http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif =)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Wilker,há erros no seu script... ou eu utilizei ele errado eu copie seu script e salvei como htmlfiz correto?olha essa linha<script type="text/javascript" src="prototype.js"></script>nao seria <script type="text/javascript" src="prototype.js"><script>ond estar esse arquivo "prototype.js" ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

você precisa baixar ele, o prototype você pode baixar no site http://www.prototypejs.org/

 

ou direto nesse link se preferir: http://prototypejs.org/assets/2007/1/18/prototype.js

 

você inclui ele na pagina, e vai pegar beleza, recomendo ateh ir no site dele para aprender os recursos do prototype, ajudam muito na programacao JS ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

bom ainda nao funcionou só testei localhost tenho que testa-lo em algum servidor??baixei o prototype o coloquei no msm diretorio só que ainda nao resolveu o problema oq pode ser?

Compartilhar este post


Link para o post
Compartilhar em outros sites

kra, akbei de tester esse codigo mesmo, esta funcionando certinho, mas cuidado que o iMasters coloca um < onde eu abro as tags script, entao lembre-se de trocar todos por <

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara estou tentando implementar seu script mas não funciona, no FF não restringe nem formata os números.Alguma dica?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, testei seu script no FF2 e ele só apresenta uma restrição.O Tab, ao final do campo, não funciona.Tow mexendo nele para retirar essa limitação.Obrigado pelo ótimo script.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui funfou numa boa!O problema foi só o RG que não está com o lance da númeração correto, tem que ser alterada esta parte.[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

como assim a mascara de rg ta errada? você quer dizer colocar as letras depois?? c for eh soh mexer na mascara XDo script eh generalizado, entao para casos de validacao de CPF e outros devem ser feitos a parte ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tá bom, é meio antigo o tópico mas essa máscara é tudo que preciso! O script é excelente, porém tem o problema de apertar tab e ele não "pular" do campo com máscara. Idéia de como resolver amigo?Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal,

 

Consertei uma série de bugs nessa classe (inclusive o problema do TAB). Incluí também o método reset() que limpa o conteúdo do campo deixando apenas o formato da máscara.

 

Compartilho abaixo o resultado final.

 

Falow,

Gagari

 

 

*OBS: Quando postei esse código originalmente havia um bug ocorrendo no IE. Mas já editei e consertei. Enfim, agora tá redondo...

/*
*
* The owner of this script is found on http://forum.imasters.com.br/index.php?showtopic=207119, just to make * the copyright :)
*
* Last Change: 30-09-2008
*
*
*/

Object.extend(Event, {
	KEY_HOME:	 36,
	KEY_END:	  35
});

var MaskedInput = Class.create();

/*
* The keycode ranges
*/
MaskedInput.ranges = {
	numeric: [48, 57],
	padnum: [96, 105],
	characteres: [65, 90],
	all: [0, 255]
};

MaskedInput.inRange = function(n, range) {
	return n >= range[0] && n <= range[1];
};

MaskedInput.validRange = function(char) {
	switch(char) {
		case '!':
			return [MaskedInput.ranges.characteres];
		case '#':
			return [MaskedInput.ranges.numeric];
		case '?':
			return [MaskedInput.ranges.characteres, MaskedInput.ranges.numeric];
		case '*':
			return [MaskedInput.ranges.all];
	}
	
	return null;
};

MaskedInput.isMaskChar = function(chr) {
	return MaskedInput.validRange(chr) != null;
};

Object.extend(MaskedInput.prototype, {
	initialize: function(obj, mask, fillSpace) {
		this.obj = $(obj);
		this.mask = mask;
		this.fillSpace = fillSpace || '_';
		
		if (/MSIE/.test(navigator.userAgent))
			this.obj.onkeydown = this.keytest.bindAsEventListener(this);
		else
				this.obj.onkeypress = this.keytest.bindAsEventListener(this);
		
		this.obj.onkeyup = Event.stop.bindAsEventListener(this);
		this.obj.onfocus = this.doSelection.bind(this);
		this.obj.onclick = this.doSelection.bind(this);
		
		if(!this.obj.value)
			this.obj.value = this.defaultString();
	},
	
	keytest: function(evt) {
		var e = evt || event;
		var code = e.keyCode || e.which || e.charCode;
		
		switch(code) {
			case Event.KEY_BACKSPACE:
				this.doBackspace();
				break;
			case Event.KEY_DELETE:
				this.doDelete();
				break;
			case Event.KEY_LEFT:
				this.moveCursor(-1);
				break;
			case Event.KEY_RIGHT:
				this.moveCursor(1);
				break;
			case Event.KEY_HOME:
				this.setSelection(0);
				break;
			case Event.KEY_END:
				this.setSelection(this.obj.value.length - 1);
				break;
			case Event.KEY_TAB:
			case Event.KEY_RETURN:
				return;
			default:
				this.maskTest(code);
		}
		
		Event.stop(e);
	},
	
	doBackspace: function() {
		this.moveCursor(-1);
		this.doDelete();
	},
	
	doDelete: function() {
		var pos = this.getCursor().left;
		
		var left = this.obj.value.substr(0, pos);
		var right = this.obj.value.substr(pos + 1, this.obj.value.length - 1);
		
		this.obj.value = left + this.fillSpace + right;
		this.setSelection(pos);
	},
	
	doSelection: function() {
		var pos = this.getCursor().left;
	   
		if(pos == this.obj.value.length)
			pos--;
		
		if(!MaskedInput.isMaskChar(this.mask.charAt(pos))) {
			if(!this.moveCursor(1))
				this.moveCursor(-1);
		} else {
			this.setSelection(pos);
		}
	},
	
	moveCursor: function(step, left) {
		var pos = left || this.getCursor().left;
		
		if(step == 0)
			return false;
		
		if(pos == 0 && step < 0)
			return false;
		
		if(pos >= (this.obj.value.length - 1) && step > 0)
			return false;
		
		do {
			pos += step;
		} while(!MaskedInput.isMaskChar(this.mask.charAt(pos)) && pos > 0 && pos < this.obj.value.length);
		
		if(!MaskedInput.isMaskChar(this.mask.charAt(pos)))
			return false;
		
		this.setSelection(pos);
		return true;
	},
	
	maskTest: function(code) {
		if(MaskedInput.inRange(code, MaskedInput.ranges.padnum))
			code -= 48;
		
		var pos = this.getCursor().left;
		
		if (pos == 0 && !MaskedInput.isMaskChar(this.mask.charAt(pos))) {
			pos++;
		}
		
		var chr = this.mask.charAt(pos);
		
		var ranges = MaskedInput.validRange(chr);
		var valid = false;
		
		if (MaskedInput.isMaskChar(chr)) {
			for(var i = 0; i < ranges.length; i++) {
				if(MaskedInput.inRange(code, ranges[i])) {
					valid = true;
					break;
				}
			}
		} else {
			valid = true;
		}
		
		if(valid) {
			var left = this.obj.value.substr(0, pos);
			var right = this.obj.value.substr(pos + 1, this.obj.value.length - 1);
			
			this.obj.value = left + String.fromCharCode(code) + right;
			
			var oldpos = pos;
			
			do {
				pos++;
			} while(!MaskedInput.isMaskChar(this.mask.charAt(pos)) && pos < this.obj.value.length);
			
			if(MaskedInput.isMaskChar(this.mask.charAt(pos)))
				this.setSelection(pos);
			else
				this.setSelection(oldpos);
		}
	},
	
	getCursor: function() {
		var left, right;
		
		if(this.obj.createTextRange) {
			var range;
			
			range = document.selection.createRange().duplicate();
			range.moveEnd("character", this.obj.value.length);
			
			if(!range.text)
				left = this.obj.value.length;
			else
				left = this.obj.value.lastIndexOf(range.text);
			
			range = document.selection.createRange().duplicate();
			range.moveStart("character", -this.obj.value.length);
			
			right = range.text.length;
		} else {
			left = this.obj.selectionStart;
			right = this.obj.selectionEnd;
		}
		
		return {left: left, right: right};
	},
	
	setSelection: function(left, rightPos) {
		var right = rightPos || left + 1;
		
		if(this.obj.createTextRange) {
			var range = this.obj.createTextRange();
			range.moveStart("character", left);
			range.moveEnd("character", right - this.obj.value.length);
			range.select();
		} else {
			this.obj.setSelectionRange(left, right);
		}
	},
	
	defaultString: function() {
		var str = '';
		
		for(var i = 0; i < this.mask.length; i++) {
			var chr = this.mask.charAt(i);
			str += MaskedInput.isMaskChar(chr) ? this.fillSpace : chr;
		}
		
		return str;
	},
	
	reset: function() {
		this.obj.value = this.defaultString();
		this.setSelection(0);
	}
	
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.