Repetido - Mascara Jquery

Front-end

29/01/2015

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

Curtidas 0

Respostas

Marcelo Pastore

Marcelo Pastore

29/01/2015

Jquery, alguem já usou o mask?
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

29/01/2015

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>
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

Testar aqui, te agradecer adiantado!
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

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>
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

29/01/2015

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>
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

Nos labels não aparece nada.
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

29/01/2015

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]
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

Está correto sim!

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150201-145525.jpg[/img]
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

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

Soeuseijothaz

29/01/2015

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.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

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

Soeuseijothaz

29/01/2015

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.
GOSTEI 0
John Lima

John Lima

29/01/2015

eu usaria o MaskMoney, simples e eficiente
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

29/01/2015

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á.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

Vou tentando aqui Jothaz, te agradeço mesmo, abraço.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

eu usaria o MaskMoney, simples e eficiente


Estou seguindo uma video aula.
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

29/01/2015

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


Baixa o exemplo do link:

https://www.dropbox.com/s/m7pqxcy0p09zb2v/jQueryMaskEdit.zip?dl=0

Fiz um exemplo usando o código que você postou e funcionou.

[img]http://arquivo.devmedia.com.br/forum/imagem/238223-20150203-084457.png[/img]


Dê um olhada e depois adapte a suas necessidades.

No meu caso coloquei o aquivo de formatação externo, mas pode usar na própria página.

Testa ai e retorne se funcionou.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

29/01/2015

Nesse exemplo é chamado outro tipo arquivo, diferente do meu. mas deu certo esse exemplo, mas não no meu caso.

vou rever isso com calma. qualquer coisa deixo assim mesmo, só achei estranho esses nomes ficarem repetidos.
GOSTEI 0
POSTAR