exemploJqueryMask.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Uso do  JQuery Mask" />

    <title>jQuery Mask Plugin - Uso do JQuery Mask.</title>
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
  </head>

  <body>


    <section class="examples">
      <div class="container">
        <h3 id="examples">Ver funcionamento</h3>

        <div class="inputs">
          <div class="input-group">
            <label for="date">Data</label>
            <input type="text" class="date" id="date"/>
          </div>

          <div class="input-group">
            <label for="time">Hora</label>
            <input type="text" class="time" id="time"/>
          </div>

          <div class="input-group">
            <label for="date_time">Data &amp; Hora</label>
            <input type="text" class="date_time" id="date_time"/>
          </div>

          <div class="input-group">
            <label for="cep">CEP</label>
            <input type="text" class="cep" id="cep"/>
          </div>

          <div class="input-group">
            <label for="cep_with_callback">Cep Com chamada (abra o console)</label>
            <input type="text" class="cep_with_callback" id="cep_with_callback"/>
          </div>

          <div class="input-group">
            <label for="crazy_cep">Cep maluco</label>
            <input type="text" class="crazy_cep" id="crazy_cep"/>
          </div>

          <div class="input-group">
            <label for="money">Monetário</label>
            <input type="text" class="money" id="money"/>
          </div>

          <div class="input-group">
            <label for="placeholder">Máscara no placeholder </label>
            <input type="text" class="placeholder" id="placeholder"/>
          </div>

          <div class="input-group">
            <label for="placeholder">Máscara num elemento div!</label>
            <input type="text" class="placeholder" id="placeholder"/>
          </div>

          <div class="input-group">
            <label for="phone">Telefone</label>
            <input type="text" class="phone" id="phone"/>
          </div>

          <div class="input-group">
            <label for="phone_with_ddd">Telephone com código de área</label>
            <input type="text" class="phone_with_ddd" id="phone_with_ddd"/>
          </div>

          <div class="input-group">
            <label for="phone_us">Telefone US</label>
            <input type="text" class="phone_us" id="phone_us"/>
          </div>

          <div class="input-group">
            <label for="sp_celphones">Celulares novos</label>
            <input type="text" class="sp_celphones" id="sp_celphones"/>
          </div>

          <div class="input-group">
            <label for="mixed">Máscara misturada</label>
            <input type="text" class="mixed" id="mixed"/>
          </div>

          <div class="input-group">
            <label for="cpf">CPF</label>
            <input type="text" class="cpf" id="cpf"/>
          </div>

          <div class="input-group">
            <label for="cnpj">CNPJ</label>
            <input type="text" class="cnpj" id="cnpj"/>
          </div>

          <div class="input-group">
            <label for="ip_address">IP Endereço</label>
            <input type="text" class="ip_address" id="ip_address"/>
          </div>

        </div>

        <label>Máscara numa div!</label>
        <div class="mask-on-div">12345678909</div> <input type="button" class="bt-mask-it" value="Mask it!"/>
      </div>
    </section>




    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

    <script src="js/examples.js"></script>

  </body>
</html>