Ir para conteúdo

Arquivado

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

josenilson

Mask dinanica

Recommended Posts

olá ,  por favor,  estou tentando fazer um dinamismo com um select option e um input, onde ao selecionar um determinado valor no select,  o input dinamicamente atribui a sua respectiva mascara.

 

Bem resumo, o usuário seleciona no select um banco (BRASIL, BRADESCO, ETC) o input Agencia atribui a devida mascara  de acordo com o banco Exemplo: banco do brasil a  mascara agencia seria 0000-0,  banco  Bradesco  mascara 0000, e assim  nos demais bancos,  eu tentei fazer algo do tipo, mas meu conhecimento e muito pouco com relação  a isso,  assim peço a colaboração de todos muito obrigado. vlw galera. 

 

OBS: Esse é o script que estou tentando fazer dar certo. 

 

<select style="width:200px;font-size: 13px" name="banco" id="banco" onchange="escolha()" required class="form-control">
<option value="">BANCO</option>
<option value="BRASIL">BRASIL</option>
<option value="BRADESCO">BRADESCO</option>
<option value="CAIXA_ECONOMICA">CAIXA ECONOMICA</option>
<option value="SANTANDER">SANTANDER</option>
<option value="ITAU">ITAU</option>
                            
</select>

<br>

<input style="width:167px;font-size:13px;" type="text" name="agencia" id="agencia" class="form-control" placeholder="AGENCIA" >


<script type="text/javascript">

function escolha() {
    
$(document).ready(function(){
$("#banco").change(function(){
   var banco = $(this).val();
   if(banco == 'BRASIL'){
    $('#agencia').mask('0000-00');
   }else if(banco == 'BRADESCO'){
     //assim por diante
   }
})
}

</script>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vamos lá, primeiro de tudo, coloque isso dentro do seu <head>

    <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>

Caso já tenha chamado a biblioteca jQuery, esqueça.

 

Segundo, coloque isso no final do seu <body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

 

Terceiro, deixei seu select assim:

<select style="width:200px;font-size: 13px" name="banco" id="banco" required class="form-control">
<option value="">BANCO</option>
<option value="BRASIL">BRASIL</option>
<option value="BRADESCO">BRADESCO</option>
<option value="CAIXA_ECONOMICA">CAIXA ECONOMICA</option>
<option value="SANTANDER">SANTANDER</option>
<option value="ITAU">ITAU</option>

Quarto, dentro do seu <head> ou em seu arquivo JS coloque esse código:

    <script type="text/javascript">
        $(document).ready(function (){
            $("#banco").change(function(){
                var banco = $(this).val();
                if(banco == 'BRADESCO'){
                    $("#mascara").val('');
                    $("#mascara").mask('00000-000');
                }else if(banco == 'ITAU'){
                    $("#mascara").val('');
                    $("#mascara").mask('0000-00');
                    //assim por diante com todos os bancos
                }
            })
        })
    </script>

 

Veja se deu certo, segue o link da documentação do jQuery mask: https://igorescobar.github.io/jQuery-Mask-Plugin/

** Só faltou o </select> no final.

Compartilhar este post


Link para o post
Compartilhar em outros sites

E também onde o usuário vai digitar a agencia, tu deixa assim o input:

<input type="text" id="mascara" data-mask="00000-0"/>

Ou no JS, troca o 

 $("#mascara").mask('00000-000');

Pelo ID do seu input original. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Kefatif
      Prezados, bom dia.
       
      Sou novo no fórum, peço desculpas caso esteja postando no local errado.
       
      Estou precisando que o edit abaixo tenha máscara de CPF e verique se o mesmo é válido ou não apresentando mensagem caso seja inválido.
       
      Meu código:
      <label style="width:15%;">CPF<br><input type="text" id="cpf" step="0.1" name="cpf" class="form-control cpf-mask" placeholder="Ex.: 000.000.000-00" style="width:100%"></label>  
      Já tentei diversas formas e não consegui.
       
      Obs.: Sou iniciante em programação web.
       
      Agradecido desde já pelas ajudas que estão por vir.
       
      Muito obrigado!!!
    • Por joaopedropeterle
      Boa tarde pessoal!
       
      Preciso fazer os valores digitados no campo do formulário serem escritos de forma inversa, pois se trata de dinheiro, nada do que fiz deu certo até agora... meu código está assim:
       
      var valor = $("#valor"); valor.keyup(() => { valor.val(VMasker.toPattern(valor.val(), "999.999.999,99", {reverse: true})); }) #valor é a ID do campo onde será inserido... Não sei se fui bem claro, sou apenas iniciante...rsrs
    • Por Kaio Augusto de Castro
      Ola pessoal, estou com uma duvida que eu não sei nem como me expressar, mas mesmo assim irei tentar.
       
      Gostaria de saber se é possível mostrar apenas um fomulário em meu site sem o conteúdo do resto, queria fazer uma espécie de "mascara" para esconder coisas que eu não quero que seja mostrado em meu site e mostrar somente aquilo que me interessa assim como descreve as imagens abaixo. 
       
      A imagem 01 é como aparece a pagina, na imagem 02 é como eu gostaria que aparecesse na minha pagina, apenas o formulário em as propagandas da empresa que fornece a hospedagem.


    • Por josenilson
      Olá pessoal,  estou com um modulo onde consta os inputs cpf, cep e telefone com mascara, porem quando gravo em banco gostaria de gravar sem as mask principalmente o cpf por user como query no futuro para os filtros de pesquisa , como resolvo isso ?
       
    • Por marcelobbt
      Encontrei um código para formatar o valor da forma que eu quero, o problema que ele aciona o script para todos os inputs (ver abaixo)
      $(function(){ $('input').bind('keypress',mask.money) }); Porém queria aplicar apenas a um dos inputs do meu form.
       
      Abaixo segue o script completo
      var mask = { money: function() { var el = this ,exec = function(v) { v = v.replace(/\D/g,""); v = new String(Number(v)); var len = v.length; if (1== len) v = v.replace(/(\d)/,"0.0$1"); else if (2 == len) v = v.replace(/(\d)/,"0.$1"); else if (len > 2) { v = v.replace(/(\d{2})$/,'.$1'); } return v; }; setTimeout(function(){ el.value = exec(el.value); },1); } } $(function(){ $('input').bind('keypress',mask.money) }); o input seria o abaixo:
      <input type="text" id="valorform" name="valorform">  
×

Informação importante

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