[Resolvido] Campo somente numeros

Fernando Wobeto · Outubro 19, 2010

Bem galera, tenho aqui um plugin jquery que permite ao usuario apenas digitar numeros dentro do campo e onde desabilitei tbm o CTRL+V para a pessoa nao poder colar string dentro do campo e está funcionando ok.

Porem se o usuario no browser selecionar em outra area alguma string (texto) e arrastar para dentro do campo, ele vai. Nao consegui nenhuma forma para evitar isto em tempo real.

Alguem descobriu alguma forma de evitar isto?!

Obrigado

Fernando Wobeto · Outubro 19, 2010

Resolvi, se alguem tiver interesse em minha solução, por favor, poste aqui!

Bem galera, tenho aqui um plugin jquery que permite ao usuario apenas digitar numeros dentro do campo e onde desabilitei tbm o CTRL+V para a pessoa nao poder colar string dentro do campo e está funcionando ok.

Porem se o usuario no browser selecionar em outra area alguma string (texto) e arrastar para dentro do campo, ele vai. Nao consegui nenhuma forma para evitar isto em tempo real.

Alguem descobriu alguma forma de evitar isto?!

Obrigado

Buongiorno · Outubro 19, 2010

Olá Fernando Wobeto, tudo bem.

Eu costumo deixar que o usuário digite/introduza o que ele quizer nas inputs e depois, ou imediatamente, eu trato os dados usando regex.

Mas, poste aí a sua solução para nós, por favor.

Até mais.

Fernando Wobeto · Outubro 20, 2010

Olá Buongiorno tudo bem? Espero que sim.

É que usando plugins de jquery de validacoes, mascaras e afins pude fazer todo o trabalho em tempo real de execução. Da forma que você mensionou funciona claro e muito bem...

mas pense um cadastro com 90 campos de digitacao livre do usuario e somente no final ele vai dizendo: 'Campo tal precisa ser numerico', 'Campo tal precisa ser isso' é chato não é?

Assim faço em tempo real. A minha solucao foi editar um plugin de jquery que permite ao usuario digitar somente numeros e nele adicionei as funcoes necessarias para que ele faça o que quero... Posto ela abaixo, está um pouco bagunçada pq ela faz muita coisa e pode nao estar desenvolvida da melhor forma até pq meu conhecimento com javascript e jquery não é pleno.

Segue:

function number_format(number, decimals, dec_point, thousands_sep) {
    // Formats a number with grouped thousands  
    // 
    // version: 1004.2314
    // discuss at: http://phpjs.org/functions/number_format
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function (n, prec) {
        var k = Math.pow(10, prec);
        return '' + Math.round(n * k) / k;
    };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

/*
 *
 * Copyright (c) 2006/2007 Sam Collett (http://www.texotela.co.uk)
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Version 1.0
 * Demo: http://www.texotela.co.uk/code/jquery/numeric/
 *
 * $LastChangedDate: 2007-05-29 11:31:36 +0100 (Tue, 29 May 2007) $
 * $Rev: 2005 $
 */
 
/*
 * Allows only valid characters to be entered into input boxes.
 * Note: does not validate that the final text is a valid number
 * (that could be done by another script, or server-side)
 *
 * @name     numeric
 * @param    decimal      Decimal separator (e.g. '.' or ',' - default is '.')
 * @param    callback     A function that runs if the number is not valid (fires onblur)
 * @author   Sam Collett (http://www.texotela.co.uk)
 * @example  $(".numeric").numeric();
 * @example  $(".numeric").numeric(",");
 * @example  $(".numeric").numeric(null, callback);
 *
 */
jQuery.fn.numeric = function(decimal, callback, mask){

	if(callback == "deixaZero"){
		var deixaZero = 1;
		 decimal = '';
	}

	if(decimal == ''){ decimal = '.';}else if(decimal == 'none'){decimal = '';}else{ decimal = decimal;}
	

	callback = typeof callback == "function" ? callback : function(){};
	this.keypress(
		function(e)
		{
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			// allow enter/return key (only when in an input box)
			if(key == 27){ // esc
				esc('fechar');
				return false;
			}
			if(key == 45){
				return false;
			}
			if(key == 13 && this.nodeName.toLowerCase() == "input")
			{
				return true;
			}
			else if(key == 13)
			{
				return false;
			}
			var allow = false;
			// allow Ctrl+A
			if((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) /* opera */) return true;
			// allow Ctrl+X (cut)
			if((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) /* opera */) return true;
			// allow Ctrl+C (copy)
			if((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) /* opera */) return true;
			// allow Ctrl+Z (undo)
			if((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) /* opera */) return true;
			// allow or deny Ctrl+V (paste), Shift+Ins
			if((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) /* opera */ || (e.shiftKey && key == 45)) return false;
			// if a number was not pressed
			if(key < 48 || key > 57)
			{
				/* '-' only allowed at start */
				if(key == 45 && this.value.length == 0) return true;
				/* only one decimal separator allowed */
				if(key == decimal.charCodeAt(0) && this.value.indexOf(decimal) != -1)
				{
					allow = false;
				}
				// check for other keys that have special purposes
				if(
					key != 8 /* backspace */ &&
					key != 9 /* tab */ &&
					key != 13 /* enter */ &&
					key != 35 /* end */ &&
					key != 36 /* home */ &&
					key != 37 /* left */ &&
					key != 39 /* right */ &&
					key != 46 /* del */
				)
				{
					allow = false;
				}
				else
				{
					// for detecting special keys (listed above)
					// IE does not support 'charCode' and ignores them in keypress anyway
					if(typeof e.charCode != "undefined")
					{
						// special keys have 'keyCode' and 'which' the same (e.g. backspace)
						if(e.keyCode == e.which && e.which != 0)
						{
							allow = true;
						}
						// or keyCode != 0 and 'charCode'/'which' = 0
						else if(e.keyCode != 0 && e.charCode == 0 && e.which == 0)
						{
							allow = true;
						}
					}
				}
				// if key pressed is the decimal and it is not already in the field
				if(key == decimal.charCodeAt(0) && this.value.indexOf(decimal) == -1)
				{
					allow = true;
				}
			}
			else
			{
				allow = true;
			}
			return allow;
		}
	).blur(function(){				
		var val = jQuery(this).val();				
		if(val == ',' || val == '.'){
			return jQuery(this).val('');
		}
		
		var valFloat = val.replace(',','.');
		if(valFloat == ''){
			valFloat = 0;
		}			
		if(parseFloat(valFloat) == 0){
			return jQuery(this).val('');
		}
		if(parseFloat(valFloat) != 0 && mask > 0){
			var valorT = parseFloat(valFloat);
			valorT = number_format(valorT,mask,decimal,'');
			return jQuery(this).val(valorT);
		}
	}).bind('mouseout focusin',function(){	
		if(decimal == ''){			
			if(!parseInt(jQuery(this).val())){
				return jQuery(this).val('');	
			}
		}else if(decimal == '.'){
			if(isNaN(jQuery(this).val())){
				return jQuery(this).val('');
			}
		}else if(decimal == ','){
			valor = jQuery(this).val().replace(',','.');
			if(isNaN(valor)){
				return jQuery(this).val('');
			}
		}
	});
	return this;
}

Olá Fernando Wobeto, tudo bem.

Eu costumo deixar que o usuário digite/introduza o que ele quizer nas inputs e depois, ou imediatamente, eu trato os dados usando regex.

Mas, poste aí a sua solução para nós, por favor.

Até mais.

Fernando Wobeto · Outubro 20, 2010

Opa, posto novamente, reescrevi um pouco o código, colocando valores defauls e opcoes definidas em array (padrao Jquery).

Segue novamente:

jQuery.fn.numeric = function(options){
	var defaults = {
		operador: 		'',
		decimais:			'',
		callback: 		false,
		valorPadrao: 	''		
	}
	
	var settings = jQuery.extend(defaults,options);
	
	callback = typeof callback == "function" ? callback : function(){};
	this.keypress(
		function(e){
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			// allow enter/return key (only when in an input box)
			if(key == 27){ // esc
				esc('fechar');
				return false;
			}
			if(key == 45){
				return false;
			}
			if(key == 13 && this.nodeName.toLowerCase() == "input")
			{
				return true;
			}
			else if(key == 13)
			{
				return false;
			}
			var allow = false;
			// allow Ctrl+A
			if((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) /* opera */) return true;
			// allow Ctrl+X (cut)
			if((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) /* opera */) return true;
			// allow Ctrl+C (copy)
			if((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) /* opera */) return true;
			// allow Ctrl+Z (undo)
			if((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) /* opera */) return true;
			// allow or deny Ctrl+V (paste), Shift+Ins
			if((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) /* opera */ || (e.shiftKey && key == 45)) return false;
			// if a number was not pressed
			if(key < 48 || key > 57)
			{
				/* '-' only allowed at start */
				if(key == 45 && this.value.length == 0) return true;
				/* only one decimal separator allowed */
				if(key == settings.operador.charCodeAt(0) && this.value.indexOf(settings.operador) != -1)
				{
					allow = false;
				}
				// check for other keys that have special purposes
				if(
					key != 8 /* backspace */ &&
					key != 9 /* tab */ &&
					key != 13 /* enter */ &&
					key != 35 /* end */ &&
					key != 36 /* home */ &&
					key != 37 /* left */ &&
					key != 39 /* right */ &&
					key != 46 /* del */
				)
				{
					allow = false;
				}
				else
				{
					// for detecting special keys (listed above)
					// IE does not support 'charCode' and ignores them in keypress anyway
					if(typeof e.charCode != "undefined")
					{
						// special keys have 'keyCode' and 'which' the same (e.g. backspace)
						if(e.keyCode == e.which && e.which != 0)
						{
							allow = true;
						}
						// or keyCode != 0 and 'charCode'/'which' = 0
						else if(e.keyCode != 0 && e.charCode == 0 && e.which == 0)
						{
							allow = true;
						}
					}
				}
				// if key pressed is the decimal and it is not already in the field
				if(key == settings.operador.charCodeAt(0) && this.value.indexOf(settings.operador) == -1)
				{
					allow = true;
				}
			}
			else
			{
				allow = true;
			}
			return allow;
		}
	).blur(function(){		
		var valCampo = jQuery(this).val();
		if(valCampo == ',' || valCampo == '.'){
			return jQuery(this).val(settings.valorPadrao);
		}else{
			var valFloat = valCampo.replace(',','.');
			if(valFloat == ''){
				valFloat = 0;
			}			
			if(parseFloat(valFloat) == 0){
				return jQuery(this).val(settings.valorPadrao);
			}
			if(parseFloat(valFloat) != 0 && settings.decimais > 0){
				var valorT = parseFloat(valFloat);
				valorT = number_format(valorT,settings.decimais,settings.operador,'');
				return jQuery(this).val(valorT);
			}						
		}
	}).bind('mouseout focusin',function(){	
		if(settings.operador == ''){
			if(!parseInt(jQuery(this).val())){
				return jQuery(this).val(settings.valorPadrao);
			}
		}else if(settings.operador == '.'){
			if(isNaN(jQuery(this).val())){
				return jQuery(this).val(settings.valorPadrao);
			}
		}else if(settings.operador == ','){
			valor = jQuery(this).val().replace(',','.');
			if(isNaN(valor)){
				return jQuery(this).val(settings.valorPadrao);
			}
		}
	});
	return this;
}

Atente que precisa de uma funcao chamada number_format() feita em javascript que está no codigo de cima!

flowsss

Entrar

Arquivado

[Resolvido] Campo somente numeros

Recommended Posts

Fernando Wobeto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Wobeto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buongiorno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Wobeto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Wobeto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante