title: How to Mask few chars in Textfield in Jsp
body: <p>I want to code a requirement where I need to Mask few characters in a Text FIeld in jsp. </p>
  
  <p>For Ex: My Textfield would accept 11 digits as input.
  Say 12345678911</p>
  
  <p>I need to display *****678911 on client side but need to pass 12345678911 on server side.</p>
  
  <p>I know I can use hidden field where I can store the unmasked value and display the masked value in TextField.</p>
  
  <p>But User can use Arrow Keys or mouse to edit 2nd character after entering all, so that logic fails here.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;SCRIPT LANGUAGE="Javascript"&gt; 
  
  var a = document.getElementById("hiddenText").value;
  
  var val = document.getElementById("repeat").value;
  function mask(str,textbox){
  var  mask;  
  
          switch(str.length){
  
          case 1: 
              this.val = str;
  
              mask = "*";
              break;
          case 2:
              val = val + str.charAt(1);
              mask = "**";
              break;
          case 3:
              val = val + str.charAt(2);
              mask = "***";
              break;
          case 4:
              val = val + str.charAt(3);
              mask = "****";
              break;
          case 5:
              val = val + str.charAt(4);
              mask = "*****";
              break;
          case 6:
              val = val + str.charAt(5);
              mask = "*****" + val.substring(5,6);
              break;
          case 7:
              val = val + str.charAt(6);
              mask = "*****" + val.substring(5,7);
              break;
          case 8:
              val = val + str.charAt(7);
              mask = "*****"+ val.substring(5,8);
              break;
          case 9:
              val = val + str.charAt(8);
              mask = "*****"+ val.substring(5,9);
              break;
          case 10:
              val = val + str.charAt(9);
              mask = "*****"+ val.substring(5,10);
              break;
          case 11:
              val = val + str.charAt(10);
              mask = "*****"+ val.substring(5,11);
              break;
          default:
  
              break;
          }   
  
  
  textbox.value = mask;
  document.getElementById("repeat").value = val
  if (document.getElementById("repeat").value.length &gt; 11){
      var h = document.getElementById("repeat").value;
      h = h.substring(0,11);
      document.getElementById("repeat").value = h;
  }
  }
  &lt;/SCRIPT&gt;
  </code></pre>
  
  <p>This works fine if user enters the value in one go, but if he modifies the entered value by moving the cursor using arrow keys or by mouse, then it fails.</p>
  
  <p>Your Help would be much appreciated!</p>
  
  <p>Thanks!</p>