간단하게 만들어보는 플레이스홀더, IE8 에서도 동일한 효과를 줄 수 있다.

예제 링크 : /preview/placeholder/placeholder.html

소스 보기

[HTML]

<div class="placeholder_box">
    <label for="placeholder">Placeholder Name</label>
    <input type="text" id="placeholder" name="placeholdername" />
</div>
<div class="placeholder_box">
    <label for="placeholder2">Placeholder Age</label>
    <input type="text" id="placeholder2" name="placeholderage" />
</div>

[CSS]

.placeholder_box {
    position: relative;
    margin: 15px 10px;
}
.placeholder_box label {
    color: #999;
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 12px;
    cursor: text;
}
.placeholder_box input[type="text"] {
    border: 1px solid #ededed;
    height: 40px;
    width: 200px;
    padding: 13px 15px;
    box-sizing: border-box;
}

[JAVASCRIPT]

jQuery(document).ready(function(){
    
    var placeholderTarget = $(".placeholder_box input[type=text]");

    placeholderTarget.focus(function(){
        $(this).siblings("label").fadeOut("fast");
    });

    placeholderTarget.focusout(function(){
        if($(this).val() == ""){
            $(this).siblings("label").fadeIn("fast");
        }
    });

});