Fórum Repetido - Mascara Jquery #508944

29/01/2015

0

Front-end

Estou testando a mascara com o JQuery, porem quando adiciono o placeholder, aparece informações repetidas

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150129-221411.jpg[/img]

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150129-221424.jpg[/img]

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150129-221436.jpg[/img]

alguem faz ideia do que pode ser?
Marcelo Pastore

Marcelo Pastore

Responder

Posts

30/01/2015

Marcelo Pastore

Jquery, alguem já usou o mask?
Responder

Gostei + 0

30/01/2015

Soeuseijothaz

Posta o código que você implementou.
Senão fica difícil ajudar.

Teoricamente é absurdamente simples, seria assim, claro que após referenciar a biblioteca do jQuery:

$(function () {
    $('.data').mask('00/00/0000', { placeholder: "__/__/__" });
    $('.hora').mask('00:00:00', { placeholder: "__:__:__" });
    $('.data_hora').mask('00/00/0000 00:00:00');
    $('.cep').mask('00000-000', { placeholder: "_____-___" });
    $('.fone').mask('0000-0000', { placeholder: "____-____" });
    $('.fone_com_ddd').mask('(00) 0000-0000', { placeholder: "(__) ____-____" });
    $('.mixed').mask('AAA 000-S0S');
    $('.cpf').mask('000.000.000-00', { placeholder: "___.___.___-__" }, { reverse: true });
    $('.cnpj').mask('00.000.000/0000-00', { placeholder: "__.___.___/____-__" }, { reverse: true });
    $('.moeda').mask('000.000.000.000.000,00', { reverse: true });
    $('.moeda2').mask("#.##0,00", { reverse: true });
    $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
        translation: {
            'Z': {
                pattern: /[0-9]/, optional: true
            }
        }
    });
    $('.ip_address').mask('099.099.099.099');
    $('.percentual').mask('##0,00%', { reverse: true });
    $('.clear-if-not-match').mask("00/00/0000", { clearIfNotMatch: true });
    $('.placeholder').mask("00/00/0000", { placeholder: "__/__/____" });
    $('.fallback').mask("00r00r0000", {
        translation: {
            'r': {
                pattern: /[\/]/,
                fallback: '/'
            },
            placeholder: "__/__/____"
        }
    });
});


html:

        <div class="field">
            <label for="txtCPF">
                CPF</label>
            <asp:TextBox ID="txtCPF" CssClass="cpf"  runat="server"></asp:TextBox>
        </div>
        <div class="field">
            <label for="txtCNPJ">
                CNPJ</label>
            <asp:TextBox ID="txtCNPJ" CssClass="cnpj" runat="server"  ></asp:TextBox>
        </div>
        <div class="field">
            <label for="txtFone">
                Telefone <span class="campo-obrigatorio"  title="Preenchimento Obrigatório!">*</span></label>
            <asp:TextBox ID="txtFone" CssClass="fone_com_ddd" runat="server"></asp:TextBox>
        </div>
        <div class="field">
            <label for="txtFax">
                Fax
            </label>
            <asp:TextBox ID="txtFax"   CssClass="fone_com_ddd" runat="server"></asp:TextBox>
        </div>
Responder

Gostei + 0

30/01/2015

Marcelo Pastore

Testar aqui, te agradecer adiantado!
Responder

Gostei + 0

30/01/2015

Marcelo Pastore

Não deu certo, olha o meu codigo:


<html>
	<head>
		<meta charset="utf-8">
		<title>Mask</title>
		
		<script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
		<script type="text/javascript" src="jquery.maskedinput/dist/jquery.maskedinput.min.js"></script>
		
		<style type="text/css">
			
		</style>
		
		<script type="text/javascript">
			$(document).ready(function () {
				$('#data').mask('99/99/9999', {placeholder: 'dd/mm/aaaa'});
				$('#cpf').mask('999.999.999-99', {placeholder: 'Digite o cpf'});
				$('#fone').mask('(999) 9999-9999? x99999', {
					completed: function() { alert('Você digitou: ' + this.val()) }
				});
			});
		</script>
	</head>
	
	<body>
		<form id="form">
			<label for="data">Data:</label><br>
			<input type="text" name="data" id="data" maxlength="10"/><br>
			
			<label for="cpf">CPF:</label><br>
			<input type="text" name="cpf" id="cpf"/><br>
			
			<label for="fone">Fone:</label><br>
			<input type="text" name="fone" id="fone"/><br>
			
			<input type="submit" value="Enviar" />
		</form>
	</body>
</html>
Responder

Gostei + 0

30/01/2015

Soeuseijothaz

Não deu certo, olha o meu codigo:


É meio vago!

Você quer dizer que nem rodou?

Mas não duplicou?

Se nem rodou, você precisa se certificar que existe o caminho da referência do jQuery:

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


Existe uma pasta na aplicação 

src="jquery.maskedinput/dist/


onde você baixou a lib do jQuery ou referenciar direto da web:

<script src="//ajax.googleapis.com/ajax/libs/jquery/coloque-aqui-a-biblioteca"></script>
Responder

Gostei + 0

30/01/2015

Marcelo Pastore

Nos labels não aparece nada.
Responder

Gostei + 0

30/01/2015

Soeuseijothaz

Nos labels não aparece nada.


Com eu disse no post anterior, você tem deve certificar-se de que ou existe um arquivo "jquery.maskedinput.min.js" em uma pasta local na sua aplicação ou referenciar direto da internet. Como no exemplo que passei. Não sei o caminho correto na internet passei o exemplo para facilitar a pesquisa.

Com você esta utilizando?

Esta local?

Porque se a página não achar a biblioteca do jQuery não retorna erro simplesmente não faz nada.

Veja o exemplo, tenho um pasta física local: "Scripts/" onde estão os meus .js:

    <script src="Scripts/jquery-1.11.1.js" type='text/javascript'></script>
    <script src="Scripts/jQuery-Mask-Plugin.js" type='text/javascript'></script>
    <script src="Scripts/jQuery-Formatacao.js" type='text/javascript'></script>


[img]http://arquivo.devmedia.com.br/forum/imagem/238223-20150130-224615.png[/img]
Responder

Gostei + 0

01/02/2015

Marcelo Pastore

Está correto sim!

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150201-145525.jpg[/img]
Responder

Gostei + 0

01/02/2015

Marcelo Pastore

Jothaz, era essa a informação que queria?
Responder

Gostei + 0

02/02/2015

Soeuseijothaz

Jothaz, era essa a informação que queria?


Esta pasta são compactadas?

Se for não vai funcionar!

Segue um roteiro, resumidamente do que fazer:

1-Crie no seu projeto uma pasta local, pode ser por exemplo scripts;
2-Descompacte todas as bibliotecas do jQuery nesta pasta, deve ficar os .js (exemplo: jquery-1.4.1.min.js, jQuery-Mask-Plugin.js e etc);
3-Faça a referência na sua página aos scripts:

<script src="Scripts/jquery-1.11.1.js" type='text/javascript'></script>


Se continuar com erro faça um teste:

Troque:

 $(document).ready(function () {



Por:

$(function () {


Se ainda assim continuar com erro post o código html da opção "Exibir código fonte da página" do browser.

Outra dica é usar as "Ferramentas do desenvolvedor" no Chrome use "CRTL + SHIFT + I" onde você acompanha com sua página esta sendo renderizada.
Responder

Gostei + 0

02/02/2015

Marcelo Pastore

Não estão compactadas, vou tentar de algum forma refazer os passos.
Responder

Gostei + 0

02/02/2015

Soeuseijothaz

Não estão compactadas, vou tentar de algum forma refazer os passos.


Sinceramente não sei o que pode esta acontecendo!

Normalmente quando não aplica a máscara é porque não esta achando a referência aos .js.

Tente fazer como eu passei, coloque todos os .js (descompactados) em um pasta local única.

Só uma observação a mascara só aparece depois que você digita algum valor.

Se o erro persistir post o código, pois facilita a ajuda.
Responder

Gostei + 0

02/02/2015

John Lima

eu usaria o MaskMoney, simples e eficiente
Responder

Gostei + 0

02/02/2015

Soeuseijothaz

eu usaria o MaskMoney, simples e eficiente


Não me leve a mal, mas você deu uma viajada!

1-MaskMoney é para campos monetários, e no caso como esta no código de exemplo postado, a mascara em questão é para: data,cpf e fone.
2-Usa o jQuery da mesma foram que o jQuery-Mask-Plugin e se o problema esta em referenciar o caminho dos plugins, só trocar o nome do plugin não resolverá.
Responder

Gostei + 0

02/02/2015

Marcelo Pastore

Vou tentando aqui Jothaz, te agradeço mesmo, abraço.
Responder

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar