How to put a text watermark in a password field?

Question

I need a watermark in the password field that says “Password”.

Here is my code:
JQuery:

$(document).ready(function() { var watermark = 'Password'; //init, set watermark text and class $('#input_pwd').val(watermark).addClass('watermark'); //if blur and no value inside, set watermark text and class again. $('#input_pwd').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#input_pwd').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); } }); }); 

HTML:

 <input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" required /> 

My jsfiddle: click here

edit: I prefer jquery :)

edit: Our brother Konrad Gadzin gave me what I was looking for, but thanks to all your efforts, everyone!

Answer 1

You can set type as text by default and change it to password using JS when removing the watermark class.

HTML:

 <input class="ui_input" id="input_pwd" type="text" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" required /> 

JS:

  //if blur and no value inside, set watermark text and class again. $('#input_pwd').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); $(this).attr('type', 'text'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#input_pwd').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); $(this).attr('type', 'password'); } }); 

Check script - http://jsfiddle.net/w4Hh4/1/

Answer 2

Use html placeholder

 <input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" placeholder='Password' required /> 

And for this you do not need js.

NOTE. The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Unfortunately, as pointed out in the comments, this will not work for older IE

Answer 3

You can use the placeholder input property.

 Username:<input type='text' placeholder="Username"/> <br/> Password: <input type='text' placeholder="Password"/> 

Please view jsFiddle Link

Answer 4

If you want to support Internet Explorer, you can do this with floating labels over the input field. Ie, the <input> tag has a corresponding <label> tag that has float: left in CSS, and they are positioned so that the label is on top of the input field. You also need to add the .click() event handler to the label, which activates the input field and hides the label, and .focus() and .blur() in the input field, which accordingly hides and shows the label.

If you do not need to support Internet Explorer, the placeholder attribute for the <input> should be sufficient.

Answer 5

Why not just do

Adding placeholder="your initial value" will solve the problem I hope for.

Answer 6

If you cannot use HTML5, try switching modes according to the first answer by @Konrad Gadzina or try this script: http://jsfiddle.net/w4Hh4/3/

Place the text box next to the password field and switch it to focus and blur.

 $(document).ready(function() { var watermark = 'Password'; //init, set watermark text and class $('#input_pwd').hide(); $('#input_pwd_fake').val(watermark).addClass('watermark'); //if blur and no value inside, set watermark text and class again. $('#input_pwd').blur(function(){ if ($(this).val() == ''){ $(this).hide(); $('#input_pwd_fake').show().val(watermark).addClass('watermark'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#input_pwd_fake').focus(function(){ $(this).hide(); $('#input_pwd').show().focus(); }); }); 

Answer 7

This will work with a cross browser as it is simple JavaScript to check if the value is set to and equal to the default value of either onfocus or onblur

 <input type="password" onfocus="if(this.value=='Password') {this.value='';}" onblur="if(this.value=='') {this.value='Password'}" value="Password" /> 

Answer 8

I am surprised that no one mentioned the jQuery Placeholder plugin from Mathrias. This allows you to use the placeholder attribute for older browsers that do not support HTML5, such as IE8.

Demo: http://mathiasbynens.be/demo/placeholder

Be careful with the font, although IE8 does not support dots in password fields for custom fonts.

Answer 9

Set class for watermark in CSS

 input.watermark { color: #D3D3D3; font-weight: 400; } 

JQuery: -

 $(document).ready(function() { var watermark = ''; // watermark value $('#myID').val(watermark).addClass('watermark'); $('#myID').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); } }); $('#input_fname').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); } }); });