パスワードのフォーム入力フィールドにデフォルト値を割り当てる方法は？

Question

私はtwitterのものと同様のputフィールドでフォームを設計しようとしています。私は入力フィールドのデフォルト値を割り当てる必要がありますが、割り当てましたが、パスワードは表示される値がデフォルトパスワードの値を「パスワード」とします。私はいくつかの値を入力すると、デフォルト値は変更する必要があります、それは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> 

Answer 1

Twitterは透過的なパスワードボックスを使用しています。 デフォルト値は実際にはデフォルト値ではなく、パスワードボックスのバックグラウンドだけです。

.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; 
} 

とすぐにラッパーを入力し始めると、「パスワードは」0

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

Answer 2

利用のKeyDownイベントにに設定されていると言って、バックグラウンドでクラスhasomeとスパンのフォントサイズを取得しますこのバイオリンをパスワードにテキストからタイプを変更し、空の文字列に

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

チェック値を変更 http://jsfiddle.net/rajani5022/PE2qu/