Ir para conteúdo

POWERED BY:

Arquivado

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

manolegal

Mascara Entrada com jQuery Mask

Por , em Desenvolvimento frontend

Recommended Posts

manolegal    12

manolegal
Postado

Olá amigos.

Tenho um formulário com Bootstrap, e estou tentando implementar máscara de entrada para os campos data, cpf e telefone com jQuery Mask. O campo data funcionou, porém cpf e telefone não.

Abaixo, partes do código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulario</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">                
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/form_select_sn.css">

    <style>
        .form-control:invalid {
            border: 1px solid #cc0000;
        }
    </style>

    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-3-3-4.min.js"></script>    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-maskmoney.js"></script>  
    <script type="text/javascript" src="js/jquery-maskedinput-1.3.1.js"></script>

<script type="text/javascript">
var $m = jQuery.noConflict()
        $m(document).ready(function(){
        $m("#data_nascimento").mask("99/99/9999");
        $m("#cpf").mask("999.999.999-99");
        $m("#telefone").mask("(99) 9999-9999");
    });
</script>  

</head>

<body>

<div id="main" class="container-fluid">
    <h3 class="page-header">Cadastrar Pessoa</h3> 

    <form id="cadastro" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

    <div class="row">
            <div class="form-group col-md-3">
  	  	<label for="data_nascimento">Data Nascimento</label>
                <input class="form-control" type="date" id="data_nascimento" name="data_nascimento" placeholder="Data Nascimento...(Obrigat�rio)" required maxlength="10">
            </div>    

        <div class="form-group col-md-2">
            <label for="cpf">CPF</label>
            <input class="form-control" type="text" id="cpf" name="cpf" value="<?php echo $_POST ["cpf"];?>" placeholder="Digite o CPF..." maxlength="14">
        </div>

        <div class="form-group col-md-2">
            <label for="telefone">Telefone</label>
            <input class="form-control" type="tel" id="telefone" name="telefone" value="<?php echo $_POST ["telefone"];?>" placeholder="Digite o Telefone..." maxlength="14">
        </div>

    </div> 

	<div class="row">
	  <div class="col-md-8 col-xs-offset-4">
	  	<button type="submit" class="btn btn-primary">Gravar</button>
                <a href="#" onclick="pessoas_listar();" class="btn btn-default">Cancelar</a>
	  </div>
	</div>

        </form>
</div>

</body>
</html>

Outra dúvida: por que funciona no Chrome e não no Firefox?

NO aguardo. Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

juninhogpe    15

juninhogpe
Postado

Bom dia.

 

Pelo que percebi seu campo data não está pegando o formato do mask e sim do campo que está informado como "type=date".

 

Uma outra questão é que pode ser que você está passando no "value" do formulário, os valores em PHP.

 

Tente retirar eles e veja se o mask irá funcionar.

 

Abs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo de andrade baessa    16

leonardo de andrade baessa
Postado 
<input class="form-control" type="text" id="cpf" name="cpf" value="<?php echo $_POST ["cpf"];?>" placeholder="Digite o CPF..." maxlength="14">

nessa forma talvez não será reconhecido.

o post ele vai ser feito pelo value se script que salva o CPF e o Telefone for de mesmo nome que a mask

só é preciso colocar 

<input class="form-control" type="text" id="cpf" name="cpf" value="cpf" placeholder="Digite o CPF..." maxlength="14">


<input class="form-control" type="text" id="telefone" name="telefone" value="telefone" placeholder="Digite o telefone..." maxlength="14">

Compartilhar este post

Link para o post
Compartilhar em outros sites

manolegal    12

manolegal
Postado

Tentei da forma sugerida:

<input class="form-control" type="text" id="cpf" name="cpf" value="cpf" placeholder="Digite o CPF..." maxlength="14">

Mas não funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Manolegal, pelo visto tudo está funcionando num teste realizado no JSFiddle, segue aqui o EXEMPLO FUNCIONAL.

HTML:

<div class="conjunto">
    <input id="data" type="text" placeholder="DATA"/>
    <input id="rg" type="text" placeholder="RG"/>
    <input id="telefone" type="text" placeholder="TELEFONE"/>
    <input id="celular" type="text" placeholder="CELULAR"/>
    
    <!-- Seu input -->
    <input class="form-control" type="text" id="cpf" name="cpf" value="cpf" placeholder="Digite o CPF..." maxlength="14">
</div>

CSS:

input{
    display: table;
    margin: 2px;
    border: 1px solid #F1F1F1;
    padding: 10px;
    outline: 0;
}

JS:

jQuery(function($) {
    $.mask.definitions['~']='[+-]';
    $('#data').mask('99/99/9999');
    $('#cpf').mask('999.999.999-99');
    $('#rg').mask('99.999.999-9');
    $('#telefone').mask('(99) 9999-9999');
    $('#celular').mask('(99) 9.9999-9999');
});

Não precisa considerar o HTML, nem o CSS. Só lembre de ver no JSFiddle que adicionei um EXTERNAL RESOURCE para chamar o plugin do masked input e adicionei também um jQuery na aba FRAMEWORK & EXTENSIONS.

 

Existem alguns motivos que podem fazer o seu código JS parar de funcionar... Tente deixar o código em só quando for dom ready, ou seja $(document).ready(function()) e o coloque no fim da lista de scripts só por fins de teste, pra ver se não tem algo corrompendo ele no meio desse caminho.

Quando você cria uma máscara de input, ou qualquer coisa que possua um ID, ele só pode ser chamado uma vez. Então veja se não possui uma chamada paralela a esse input.

Aconselho a não usar o método value, apesar que não faz diferença, mas em alguns casos isso pode causar conflito, já que você está definindo um valor padrão que vai contra as regras da mask que criou.

Eu vi que você possui um maskmoney e um maskedinput mas qual seria a diferença entre eles? Um possui máscara para dinheiro e o outro para inputs aleatórios? Tente deixar tudo num só e também verifique o código pra ver se não há conflitos.

O seu código HTML parece estar correto, essa do input não é questão de value, ou do PHP. As respostas anteriores que recebeu estão incorretas. O JS sempre executa (a não ser que você queira executar antes) após as instruções enviadas pelo PHP. Ou seja, se o PHP definiu o valor CPF para o <input>, o JS vai ler CPF ao invés de <?php ?>.

Ah, uma dica, evite ficar usando <script> dentro da <head>, conforme W3C a forma correta de usá-lo é ao final do corpo do documento, antes do fechamento da </body>.

 

Faça essas modificações, analise seu código e a estrutura da sua página e nos envie o resultado novamente.

Obs.: Não esqueça de atualizar o jQuery para o mais atual ou 2.1.0 e utilizar a maskedinput também mais atual (1.3.1).

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito