Fields are not 'masked' with jQuery Masked Plugin

Navigation
5

Good afternoon,

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

Plugin: link

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 do not understand almost anything yet. I'm starting to learn. Thank you in advance!

    
asked by anonymous 23.05.2015 / 21:45

2 answers

2

You are applying .mask() to div element. You must apply to the input element. So your selector has to be ".classe_da_div input" .

How it works: 

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

Example: link

    
24.05.2015 / 00:23
0

The code above works, but to use the data from the form 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 inherit ".data input" or application 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 by running. link

    
02.09.2016 / 06:12
Lists and dictionaries python Arduino send GET to PHP page