I have few text fields like SSN , phone number and email id. I would like to do something like onfocus it should display the whole content of that input box and on blur it should mask the content back to something (say asterix).Thanks in advance

I have few text fields like SSN , phone number and email id. I would like to do something like onfocus it should display the whole content of that input box and on blur it should mask the content back to something (say asterix).Thanks in advance

• javascript
• html

3 Answers 3

You could switch the type of the <input> element between password and text in both events. See this example fiddle.

HTML

<input type="password" id="target" />

JS

<script>
var inp = document.querySelector( '#target' );

inp.addEventListener( 'focus', function(){
    inp.type = 'text';
});
inp.addEventListener( 'blur', function(){
    inp.type = 'password';
});
</script>

Try it like this:

<input type="text" id="emailId" name="emailId" />

Then, do a:

var emailIdValue = "";

$( document ).ready( function() {

     emailIdValue = $( '#emailId' ).val();   

     $( '#emailId' ).val( "********" );

     $( '#emailId' ).focus( function() {

          $( this ).val( emailIdValue );

     } ).focusout( function() {

          emailIdValue = $( this ).val();
          $( this ).val( '********' );

     } );

} );

You could simply use <input type="password" /> if you want to do it simple.