2

Como posso colocar máscaras para telefone e CPF no text_field?

Em app/views/layouts/application:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>

 <%= stylesheet_link_tag :all%>
 <%= javascript_include_tag :application %>
 <%= csrf_meta_tag %>

Em app/assets/javascript:

$(document).ready(function(){
  $(.tel_celular).mask("(99) 99999-9999");
});

No form de bolsista:

<%= f.text_field :tel_celular, class: "form-control", class: "span2", id: 'tel_celular' %>

Mas não carrega a máscara.

9
  • Acho que o problema é no seletor, tá faltando as aspas $('.tel_celular'). O input possui a classe tel_celular?
    – Lucas
    6/03/2015 às 11:09
  • Sim. Não se pode trabalhar com nomes de classes já existentes ?
    – Fernanda
    6/03/2015 às 22:41
  • Bem é um dos ítens da classe bolsista melhor dizendo.
    – Fernanda
    6/03/2015 às 22:50
  • Acho que você está usando a função errado, não? Deveria ter alguma chamada de on_keypress ou algo assim não?! 17/03/2015 às 23:17
  • 3
    Possível duplicata de Máscara de telefones usando jQuery Mask Plugin
    – marcusagm
    14/10/2016 às 21:21

4 Respostas 4

2

Você pode utilizar o seguinte plugin: JQuery Mask Plugin. Sempre uso ele e atende às minhas necessidades.

Mas tem algumas coisas que você precisa fazer.

Primeiro: Certifique-se de que você está fazendo a chamada da função JavaScript na página onde está o input para o qual o filtro será aplicado.

<script type="text/javascript" charset="utf-8"> 
    $('.js_telefone').mask('(99) 99999-9999');
</script>

Segundo: Se você for aplicar o input baseado na classe deverá usar como descrito anteriormente, se for baseado no substitua o "." por "#":

<script type="text/javascript" charset="utf-8"> 
    $('#js_telefone').mask('(99) 99999-9999');
</script>

Terceiro: Vá até o imput onde o filtro será aplicado e declare a classe. No caso desse exemplo será 'js_telefone':

<input type="text" class="jstelefone">

Obs: Lembre-se de importar o script do plugin na página.

Espero ter ajudado.

1

Boa noite ,

<script type="text/javascript"> // Mascaras Javascript

function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}

function id( el ){
	return document.getElementById( el );
}

// aqui começa as mascaras 

function mtel(v){ //MASCARA PARA TELEFONE

    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
    return v;
}


function mcpf(v){  //MASCARA PARA CPF

    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
                                             //de novo (para o segundo bloco de números)
    v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") //Coloca um hífen entre o terceiro e o quarto dígitos
    return v;
}

function mcnpj(v){  //MASCARA PARA CNPJ

    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
	
	 v=v.replace(/(\d{2})(\d)/,"$1.$2")
	 v=v.replace(/(\d{3})(\d)/,"$1.$2")
     v=v.replace(/(\d{3})(\d)/,"$1/$2")       	 
     v=v.replace(/(\d)(\d{2})$/,"$1-$2");    //Coloca o . antes dos últimos 3 dígitos, e antes do verificador 
    return v;
}

function mie(v){  //MASCARA PARA CNPJ

    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito      	 
     v=v.replace(/(\d{3})(\d)/,"$1.$2")
	  v=v.replace(/(\d{3})(\d)/,"$1.$2")
	  v=v.replace(/(\d{3})(\d)/,"$1.$2")
    return v;
}


function mrg(v){  //MASCARA PARA RG

    //  v=v.replace( /\s/g, '' );                  //Remove tudo o que não é dígito
	//	v=v.replace(/(\d)(\d{7})$/,"$1.$2");   	 //Coloca o . antes dos últimos 3 dígitos, e antes do verificador
    //  v=v.replace(/(\d)(\d{4})$/,"$1.$2");    //Coloca o . antes dos últimos 3 dígitos, e antes do verificador
    //  v=v.replace(/(\d)(\d)$/,"$1-$2");       //Coloca o - antes do último dígito
		
	v=v.replace(/(\d{2})(\d)/,"$1.$2")       //Coloca um ponto entre o segundo e o terceiro dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")     
	v=v.replace(/(\d{5})(\d)/,"$1.$2")     
	v=v.replace(/(\d{9})(\d)/,"$1-$2")       
    return v;
}

function mcep(v){  //MASCARA PARA CEP

    v=v.replace(/\D/g,"")                      //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2")         //Esse é tão fácil que não merece explicações
    return v;
}

function mcartao(v){ //MASCARA PARA CARTAO

    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{4})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{4})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
	v=v.replace(/(\d{4})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
	v=v.replace(/(\d{4})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    return v;
}

function mdata(v){ // MASCARA PARA DATA 

    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{2})(\d)/,"$1/$2");
    v=v.replace(/(\d{2})(\d)/,"$1/$2");
    return v;
}

function mvalor(v){  //MASCARA PARA VALOR EM $$

    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    v=v.replace(/(\d)(\d{8})$/,"$1.$2");//coloca o ponto dos milhões
    v=v.replace(/(\d)(\d{5})$/,"$1.$2");//coloca o ponto dos milhares
 
    v=v.replace(/(\d)(\d{2})$/,"$1,$2");//coloca a virgula antes dos 2 últimos dígitos
    return v;
}

function mvalor(v){  //MASCARA PARA VALOR EM $$

    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    v=v.replace(/(\d)(\d{8})$/,"$1.$2");//coloca o ponto dos milhões
    v=v.replace(/(\d)(\d{5})$/,"$1.$2");//coloca o ponto dos milhares
 
    v=v.replace(/(\d)(\d{2})$/,"$1,$2");//coloca a virgula antes dos 2 últimos dígitos
    return v;
}

function memail(v){

		v=v.replace( /\s/g, '' );
		return v;
}

window.onload = function(){ // FUNCAO QUE É ACIONADO AO CARREGAR A PAGINA ( WINDOW.ONLOAD )

	id('txtCel').onkeyup = function(){ //ATRIBUI O CAMPO COM ID txtCel A MASCARA DE TELEFONE
		mascara( this, mtel );
	}
	
	id('txtFixo').onkeyup = function(){ //ATRIBUI O CAMPO COM ID txtFixo A MASCARA DE TELEFONE
		mascara( this, mtel );
	}
	
	id('txtComercial').onkeyup = function(){ //ATRIBUI O CAMPO COM ID txtComercial A MASCARA DE TELEFONE
		mascara( this, mtel );
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label col-md-3">Celular</label>
								<div class="col-md-4">
									<input type="tel" class="form-control" id="txtCel" name="txtCel" value="<?php echo $_POST['txtCel'];?>" maxlength="15" >
								</div>
						</div>
					</div>
													
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label col-md-3">Telefone fixo</label>
								<div class="col-md-4">
									<input type="text" id="txtFixo" name="txtFixo" class="form-control" value="<?php echo $_POST['txtFixo'];?>" maxlength="15" >
								</div>
						</div>
					</div>
							
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label col-md-3">Telefone Comercial</label>
								<div class="col-md-4">
									<input type="tel" class="form-control" id="txtComercial" name="txtComercial" value="<?php echo $_POST['txtComercial'];?>" maxlength="15">
								</div>
						</div>
					</div>
				</div><!--::: ROW :: -->

Segue arquivo de teste funcionando.

https://mega.nz/#!3pc1ADTJ!xpX-qug03hCbJJ5UhQ1gqhc2JkP7E1MpKRMIYkXTjxw

Qualquer coisa , posta ae.

1
  • Muito. Eu achei que só faltou o limitador do tamanho ou aqui não deu certo, eu acho que o Regex tem como limitar o tamanho, caso você atualize a resposta e de certo eu dou um UP 17/08/2017 às 18:52
0

É possivel usar caracteres opcionais

 $('.tel_celular').mask('(99) 9999-9999?9').focusout(function() {
      var phone, element;
      element = $(this);
      element.unmask();
      phone = element.val().replace(/\D/g, '');
      if( phone.substring(0, 1) === '0' ) {
           element.mask("9999-999-9999");
      } else if (phone.length > 10) {
           element.mask("(99) 99999-999?9");
      } else {
           element.mask("(99) 9999-9999?9");
      }
 }).trigger('focusout');
-1

Quando for utilizar o Jquery para classes começe com ponto

   $(.tel_celular).mask("(99) 99999-9999");

Quando for retornar de acordo com o id, utilize #

   $(#tel_celular).mask("(99) 99999-9999");

Nesse seu caso, faltou declarar a classe como tel_celular no lugar de span2 ex.:

   <%= f.text_field :tel_celular, class: "form-control", class: "tel_celular", id: 'tel_celular' %>

Caso utilize essa classe span2 para os telefones, é só mudar la no javascript para:

    $(document).ready(function(){
        $(.span2).mask("(99) 99999-9999");
    });
14
  • Infelizmente não funcionou. Não consegue carregar as máscaras dentro text_field.
    – Fernanda
    6/03/2015 às 22:33
  • Já não sei mais o que posso fazer para aparecer estas máscaras.
    – Fernanda
    6/03/2015 às 23:02
  • @Fernanda você relacionou o arquivo jquery mask a seu projeto? As outras funções do jquery estão funcionando?
    – wcj
    10/03/2015 às 23:07
  • Bem instalei a gem jQuery Mask no GemFile, coloquei a chamada na application no caminho: app\view\layout assim <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.maskedinput.js"/></script> e no applicatio.js isso: $(document).ready(function(){ $("#tel").mask("(99)99999-9999"); }); e no form de view : <%= f.text_field :tel_celular, class: "form-control", class: "tel", id: "tel" %> modifiquei as chamadas, ao invés de de tel_celular para tel para ver se modificava, mas ainda nada.
    – Fernanda
    18/03/2015 às 1:29
  • Estou presa com esta parte do sistema.
    – Fernanda
    18/03/2015 às 1:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .