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&开发者_高级运维gt;
</div>
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;
}
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/
精彩评论