Fields are not 'masked' with jQuery Masked Plugin

Asked

Viewed 1,291 times

5

Good afternoon,

@EDIT The fields are now accessible. However, what is typed is not masked as preset in the script.

Plugin: http://digitalbush.com/projects/masked-input-plugin/

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cadastro</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script>
    jQuery(function($){
       $(".data").mask("99/99/9999");
       $(".telefone").mask("9999-9999");
    });
</script>
</head>
<body>
<form action="">
    <div class="data">
        <label for="">Campo 1:</label>
        <input type="text">
    </div>
    <div class="telefone">
        <label for="">Campo 2:</label>
        <input type="text">
    </div>
    <div class="">
        <label for="">Campo 3:</label>
        <input type="text">
    </div>
    <div class="">
        <label for="">Campo 4:</label>
        <input type="text">
    </div>
    <div class="">
        <label for="">Campo 5:</label>
        <input type="text">
    </div>
</form>
</body>
</html>

As you can see, I understand almost nothing yet. I’m starting to learn. Thanks in advance!

javascript jquery
  • 1

    What do you mean "impossible to access in a PHP page"? do you mean that you cannot receive the input value on the server? or that the input does not work and the user cannot write to it? You can put the HTML you have?

  • @Sergio, you cannot type anything in the input, you click inside it and try to type but nothing is inserted.

  • Can you [Edit] the question and put your HTML? If you make a jsFiddle is ideal...

  • So the problem is certainly not related to php. Can you edit your question and put the form code with the inputs as well? Maybe it helps to find the error

  • Sergio and Andrei Coelho, edited.

2 answers

2


You’re applying the .mask() to the element div. You have to apply to the element input. So your selector must be ".classe_da_div input".

That’s how it works:

 jQuery(function ($) {
     $(".data input").mask("99/99/9999");
     $(".telefone input").mask("9999-9999");
 });

Example: http://jsfiddle.net/x94dzw92/

  • 1

    worked! Thanks for the help!!

  • @Luan great! Glad I could help.

  • 1

    I liked this Plugin... I will use too! thanks

0

The above code does work, but to use the data from the directory you will need to put the name and id attributes of the input fields.

<div class="data"> 
    <label for="">Campo 1:</label>
    <input name="campo1" id="campo1" class="maskdata" type="text">
</div>

In the so-called mask function you can still do by inheritance ". data input" or application of classes with names of your choice such as ". maskdata" or ". masktel".

jQuery(function ($) {
     $(".data input, .maskdata").mask("99/99/9999");
     $(".telefone input, .masktel").mask("9999-9999");
 });

Follow example running. http://jsfiddle.net/s3vq3s9z/1/

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.