HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。
<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>
$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
$(this).next(".placeholder").hide();
}
});
$(".placeholder_check").focus(function(){
$(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
$(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
if($(this).val() == "") {
$(this).next(".placeholder").show();
}
});
});
.placeholder {
display: block;
white-space:pre;
position: absolute;
top: 9px;
left: 30px;
color: #bbb;
}