title: Masking the values in a textbox using jQuery
body: <p>I have a textbox and onkeyup event I have to mask (with asterisk (*) character) a portion of the string (which is a credit card number) when user enter the values one after the other. e.g. say the value that the user will enter is <strong>1234 5678 1234 2367</strong>.</p>
  
  <p>But the textbox will display the number as <code>1234 56** **** 2367</code></p>
  
  <p>I general if the user enters <code>XXXX XXXX XXXX XXXX</code>, the output will be <code>XXXX XX** **** XXXX</code> where X represents any valid number</p>
  
  <p>The program needs to be done using jQuery. I have already made the program (and it is working also) which is as follows:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function() {
  
          $("#txtCCN").keyup(function(e) {
  
              var CCNValue = $(this).val();
              var CCNLength = CCNValue.length;
  
              $.each(CCNValue, function(i) {
  
                  if (CCNLength &lt;= 7) {
                      $("#txtCCN").val(CCNValue);
                  } //end if
  
                  if (CCNLength &gt;= 8 &amp;&amp; CCNLength &lt;= 14) {
                      $("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, CCNLength).replace(/[0-9]/g, "*"));
                  } //end if 
  
                  if (CCNLength &gt;= 15) {
                      $("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/[0-9]/g, "*") + CCNValue.substring(15));
                  } //end if
              });
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;input type="text" id="txtCCN" maxlength=19 /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But I think that the program can be optimized/re-written in a much more elegant way.</p>
  
  <p>N.B. I don't need any validation at present.</p>