5

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

user1482239
  • 75
  • 1
  • 1
  • 6

3 Answers3

12

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>
Sirko
  • 72,589
  • 19
  • 149
  • 183
  • or use jQuery $('#target').focus(function(){ $(this).attr('type','text') }); – Carlo Moretti Jun 26 '12 at 09:40
  • @Onheiron that doesn't work. see http://stackoverflow.com/questions/8378563/why-cant-i-change-the-type-of-an-input-element-to-submit – Technomad Dec 20 '16 at 15:17
  • The above fiddle doesn't work due to some interference from the inclided Mootools library. Here's an updated [fiddle](http://jsfiddle.net/VWAhC/87) with the same code without the Mootools library and a border around the input box because it was hard to see. – Niles Turner Feb 27 '18 at 20:23
1

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( '********' );

     } );

} );
Nemanja
  • 1,505
  • 12
  • 24
0

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

Rorok_89
  • 365
  • 1
  • 9