formating textfield input

Question

I've a text field. I'm to type the email in it.. eg. [email protected]

What I want is that, as soon as the user types the char "@", the remaining part of the string gets masked so that it appears to the user viewing as username@****

But in the backend, the real keys typed has to be captured somehow.

Is there a way to do that using javascript??

Answer 1

I have no idea why you'd want to do that, but you could add an onKeyPress function to the text field which adds the typed letter to a hidden field and then updates the text field with the starred-out copy.

Answer 2

You can use OnKeyDown event to capture the user input.

Using a hidden field, keep the real value in there. When a new character is pressed, add it to the value from the hidden field and in the text field display the masked text.

Also you have to be carefull with special characters (backspace in particular).

Answer 3

Try with jQuery

$("input").keyup(function(){
     var charIndex = $(this).val().indexOf("@");
     if(charIndex!=-1){
         charIndex++;     // to start with character after @
         $("#hidEmail").val($(this).val());
         var replaceStr = "";
         for(i=0;i< ($(this).val().length-charIndex) ; i++){
             replaceStr=replaceStr+"*";
         }
         $(this).val($(this).val().replace($(this).val().substr(charIndex),replaceStr));
     }
});