Arkaplanda duran input value

Saatlerce aradım, bulduysam da bir sayfalık .js kodlarının arasından çıkamadım.

Tıklandığı zaman kaybolan input value kodu:

onblur="if(this.value == '') { this.value='Kullanıcı Adı'}" onfocus="if (this.value == 'Kullanıcı Adı') {this.value=''}"

Fakat benim istediğim arka planda duran, seçilemeyen bir input value. Ama yazı yazmaya başlandığı zaman kaybolacak.

Örnek: www.me.com

Yardımcı olabilecek var mı? Çok teşekkürler.

jquery kutuphanesini sayfanıza dahil ederseniz boyle işlemler daha da kolaylaşır. ornek kod vereyim.

<input id="username" value="User Name">

bu input olsun


bu da js kodumuz:

$(document).ready(function (){

 $('#username').blur(function(){
      if($(this).val()=='User Name'  || $(this).val()==""){
            $(this).val('User Name').css({'color':'#000'});      
    }
 }).focus(function(){
 if($(this).val()=='User Name' ){
   $(this).val('User Name').css({'color':'#ddd'});       } 
   
}).keyup(function(){
if($(this).val()=='User Name' ){
   $(this).val('').css({'color':'#000'});       

}

 });

});

<div class="row username">
<label id="usernameLabel" for="username" class="placeholder"><span>Member Name</span></label>
<input id="username" name="username" class="text" type="text" maxlength="128" value="" />
</div>



.row { float: left; }
.row.username { margin-left: -1px; }
.row input.text, body.login.firefox input.text {
border: 1px solid #1e1f21;
height: 1.35em;
line-height: 17px;
margin: 0 6px 0 0;
width: 185px;
-webkit-box-shadow: rgba(255,255,255, 0.12) 0 1px 1px;
}
body.login.firefox input.text:focus {
-moz-outline: 2px solid #7b8aac;
-moz-outline-radius-bottomleft: 5px;
-moz-outline-radius-topleft: 5px;
-moz-outline-radius-bottomright: 5px;
-moz-outline-radius-topright: 5px;
/* -moz-outline-top-color: #3d4347;*/
}
body.login.ie input.text {
line-height: 17px;
padding: 1px 3px 4px 4px;
}
.row input.text.disabled {
opacity: .5;
}



Kodlarda deneme yapamadım birazda temizledim ama mantık şöyle; Aslında Value değişmiyor direk mouse textbox'ın üstünde tıklama yaptığında textbox'a border geliyor ve opacity düşüyor oradaki yazı disable görüntüsü veriyor.
Bunu Jquery ile mesela direk aycan div'inin içindeki a tagına tıklandığında Textbox classını şu yap diyeceksin buradan jquery ile css değiştirmeye bak ve değişecek css e border ve opacity ver.
http://www.eburhan.com/jquery-yuksek...tle-eklentisi/

Kolay gelsin umarım hiç değilse biraz kurcalarsın.

Çok teşekkürler arkadaşlar, çok işime yaradı. Ellerinize sağlık.