0

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?

4
  • May I ask, why do you need this?
    – cherouvim
    Oct 5, 2010 at 5:55
  • maybe u can add your function to mask like pengoworks.com/workshop/js/mask
    – Haim Evgi
    Oct 5, 2010 at 5:57
  • 1
    Because obscured typos are fun for everyone? =/ Oct 5, 2010 at 6:02
  • 1
    What if a user pastes the string from a clipboard?
    – Zabba
    Oct 5, 2010 at 6:21

3 Answers 3

2

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.

1

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));
     }
});
2
  • Can u please put a small comment for each line. Im new to jQuery.
    – ptamzz
    Oct 5, 2010 at 6:22
  • Ok. I'll figure that out.. Thanks :)
    – ptamzz
    Oct 5, 2010 at 6:26
1

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.