Phone and CPF masks in TextField

Question

Phone and CPF masks in TextField

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

2

How can I put phone and CPF masks in 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% share%:

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

But do not load the mask.

html jquery jquery-masked-input

asked by anonymous 06.03.2015 / 03:52

4 answers

How to prevent a JSESSIONID from being created when accessing a JSP page? Bring "child" records count next to all table records

score 2 · Answer 1

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

But there are some things you need to do.

First : Ensure that you are calling the JavaScript function on the page where the input to which the filter is applied to.

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

Second : If you are going to apply the input based on the class you should use as previously described, if it is based on 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_phone':

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

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

I hope I have helped.

score 0 · Answer 2

Good evening,

<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><divclass="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.

link

Anything, put ae.

score 0 · Answer 3

Optional characters can be used

 $('.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');

score -1 · Answer 4

When using Jquery for classes start with dot

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

When it returns according to the id, use #

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

In this case, you failed to declare the class as a tel_cell in place of span2 eg:

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

If you use this span2 class for the phones, just change the javascript to:

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