how to assign default value in form input field for password?

Question

I am trying to design a form in put field similar to the one in twitter i need to assign default value for the input fields, i did assign ,but for password the value displayed was in a password format, how to show the default value of the password as 'password'. also the default value should only change when i type some value, it shouldn't disappear onclick.

<div class="editfield">
<label for="signup_password">Choose a Password <span class="required">*</span>
</label>
<div class="input_field">
<input type="password" minlength="6" value="Password" id="signup_password" 
   name="signup_password" onclick="this.value=''" 
   onblur="if(this.value=='') this.value='Choose a Password';">
<span id="pass1Info" class=""></span></div>
</div>

So wait, you don't want the password field to be masked at all? Or are you saying you only want the value to be masked if it's different to the default value. That seems unintuitive and confusing — Gareth, Jul 27 '11 at 09:51

score 3 · Answer 1 · answered Jul 27 '11 at 09:59

Twitter is using a transparent password box. The default value is not really a default value but just the background of the password box.

.front-page form .holding input {
    -moz-transition: opacity 1s ease 0s;
    background-color: white;
    border: medium none !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
    color: #567792;
    opacity: 0.7;
}

As soon as you start to type the wrapper gets the class hasome and the font-size of the span in the background saying "password" is set to 0

.logged-out form .hasome .holder {
    font-size: 0 !important;
    opacity: 0;
}

It would be great if you post the entire script and html – Ezhil Jul 27 '11 at 10:17 — Ezhil, Jul 27 '11 at 10:17

score 1 · Answer 2 · answered Jul 27 '11 at 10:06

Use keydown event to change the type from text to password and change the value to empty string

    <div><input value="Password"  onkeydown="if(this.type!='password'){this.type='password';this.value='';}" onblur="if(this.value=='') this.value='Choose a Password';">
</div>

check this fiddle http://jsfiddle.net/rajani5022/PE2qu/

how to assign default value in form input field for password?

2 Answers2