Masks for phone and CPF in TextField

How can I put phone and CPF masks on text_field?

In 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 %>

In app/assets / javascript : 

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

No form of scholar: 

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

But does not load the mask.

Author: Kenny Rafael, 2015-03-06
Source

4 answers

You can use the following plugin: JQuery Mask plugin . I always use it and it meets my needs.

But there are some things you need to do.

First : make sure that you are calling the JavaScript function on the page where the input is for which the filter will be applied.

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

Second: if you are going to apply input based on the class you should use as described above, if it is based on the replace the"."by"#": 

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

Third : go to the imput where the filter will be applied and declare the class. In the case of this example it will be 'js_telefone': 

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

Note: remember to import the plugin script into the page.

I hope I helped.

 2
Author: Guilherme Ramalho, 2016-08-25 20:50:02

Good Night, 

<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 :: -->

Follows test file working.

Https://mega.nz/#! 3pc1adtj!xpX-qug03hCbJJ5UhQ1gqhc2JkP7E1MpKRMIykxtjxw

Anything, post ae.

 1
Author: Henrique Felix, 2015-10-25 00:51:58

It is possible to use optional characters 

 $('.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');
 0
Author: marcusagm, 2016-10-14 21:19:38

When using Jquery for classes start with DOT 

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

When returning according to the id, use # 

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

In this case, it was missing to declare the class as tel_cellular instead of span2 ex.: 

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

If you use this SPAN2 class for phones, just change it in javascript to: 

    $(document).ready(function(){
        $(.span2).mask("(99) 99999-9999");
    });
 -1
Author: wcj, 2015-12-02 19:24:53