title: Credit card masking - jquery
body: <p>I am trying to have a special formatting for a credit card input field using jquery with maskedinput.js.</p>
  
  <p>Currently, my masking is xxxx-xxxx-xxxx-xxxx
  and i would like user to be forced to only input 6 first digits and four last ones and leave the numbers in the middle as '*' like:</p>
  
  <p>1234-12**-****-1111</p>
  
  <p>I have the following code to achieve this :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
  
      &lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.maskedinput.js"&gt;&lt;/script&gt;
  
  
          &lt;script type="text/javascript" src="js/jquery.placeholder.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
  
          jQuery(document).ready(function($){
  
  
              var creditcard = $("#creditcard").mask('9999-9999-9999-9999', {placeholder:'X'});
  
  
          });             
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="smart-wrap"&gt;
          &lt;div class="smart-forms smart-container wrap-3"&gt;
  
              &lt;div class="form-header header-primary"&gt;
                  &lt;h4&gt;&lt;i class="fa fa-pencil-square"&gt;&lt;/i&gt;Form &lt;/h4&gt;
              &lt;/div&gt;&lt;!-- end .form-header section --&gt;
  
              &lt;form method="post" action="/" id="account2"&gt;
                  &lt;div class="form-body"&gt;
  
  
  
                          &lt;div class="section colm colm6"&gt;
                              &lt;label for="creditcard" class="field-label"&gt;Credit Card Number&lt;/label&gt;
                              &lt;label for="creditcard" class="field"&gt;
                                  &lt;input type="text" id="creditcard" name="creditcard" class="gui-input" placeholder="Credit Card Number"&gt;
                              &lt;/label&gt; 
                          &lt;/div&gt;&lt;!-- end .section section --&gt;
  
                      &lt;/div&gt;&lt;!-- end .frm-row section --&gt;
  
                  &lt;/div&gt;&lt;!-- end .form-body section --&gt;
                  &lt;div class="form-footer"&gt;
                      &lt;button type="submit" class="button btn-primary"&gt; Send Form &lt;/button&gt;
                  &lt;/div&gt;&lt;!-- end .form-footer section --&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>any clue how to achieve this ? Is there a special parameter for this?</p>