How to put a text watermark in a password field?

Question

I want a watermark in my password field which 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 Gadzina has given me what I was looking for but thanks for all your efforts everyone!

Before you go further, learn the definition of both watermark and placeholder - they're not even nearly related. — George, Apr 26 '13 at 10:02
possible duplicate of [Showing Placeholder text for password field in IE](http://stackoverflow.com/questions/6052544/showing-placeholder-text-for-password-field-in-ie) — winner_joiner, Jul 09 '13 at 10:49

score 8 · Answer 1 · answered Apr 26 '13 at 10:02

You can set the type to be text by default and change it to password with JS while removing 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 fiddle - http://jsfiddle.net/w4Hh4/1/

@Tom grat, I'm glad it helped. If this answer fits your needs, remember to mark it as accepted answer to show that your problem is solved. — Konrad Gadzina, Apr 26 '13 at 10:15

score 5 · Answer 2 · answered Apr 26 '13 at 10:01

5

Use html's 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 you don't need any js for it.

NOTE: The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Unfortunatly as stated in the comments it won't work for older IE

answered Apr 26 '13 at 10:01

Spokey

10,974
2
28
44

1

For IE < 9 you will need JS still – David Barker Apr 26 '13 at 10:01
Is it supported by mozilla firefox? – Surfine Apr 26 '13 at 10:02
@Tom It is supported in Firefox yes – David Barker Apr 26 '13 at 10:02

score 3 · Answer 3 · answered Apr 26 '13 at 10:02

3

You can use the placeholder input property.

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

Please see this jsFiddle Link

answered Apr 26 '13 at 10:02

KevinIsNowOnline

773
4
10

1

We can see that there'a bunch of downvotes within this SO question, can you explain why? User explicitly didn't specify the browser that he uses, we just based our assumption on the jquery() snippet on his code. – KevinIsNowOnline Apr 26 '13 at 10:05

pilsetnieks · Answer 4 · 2013-04-26T10:09:46.160

If you want to support Internet Explorer, you can do it with floated labels on top of the input field. I.e., the <input> tag has a corresponding <label> tag that has a float: left in CSS and the they are positioned so that the label is on top of the input field. You'd also need to add .click() event handler to the label that activates the input field and hides the label, and .focus() and .blur() on the input field that respectively hide and show the label.

If you don't need to support Internet Explorer, the placeholder attribute for <input> tags should suffice.

score 0 · Answer 5 · answered Apr 26 '13 at 10:02

0

Why not simple do

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

answered Apr 26 '13 at 10:02

OmniPotens

1,125
13
30

this is HTML5 attribute. Old browsers such as Firefox 3.x won't work. – Raptor Apr 26 '13 at 10:18

score 0 · Answer 6 · answered Apr 26 '13 at 10:12

If you can't use HTML5, then try switching modes as suggested per the first answer by @Konrad Gadzina or try this fiddle: http://jsfiddle.net/w4Hh4/3/

Put a textbox next to the password box and switch it on 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();
});
});

score 0 · Answer 7 · answered Apr 26 '13 at 10:23

This will work cross browser as it's a simple JavaScript to check if a value is set and equals the default set value either onfocus or onblur

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

score 0 · Answer 8 · answered Apr 26 '13 at 10:36

I'm surprised no one mentioned the jQuery Placeholder plugin by Mathrias. It allows the use of the placeholder attribute for older browsers that do not support HTML5, like IE8.

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

Be careful with font though, IE8 doesn't support the dots in password fields for custom fonts.

score 0 · Answer 9 · answered Apr 28 '13 at 15:29

Set a class for the 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');
        }
    });
});

How to put a text watermark in a password field?

9 Answers9

Linked

Related