21'C 흐림
서울 강남구
간단하게 만들어보는 플레이스홀더, IE8 에서도 동일한 효과를 줄 수 있다.
예제 링크 : http://cheolguso.com/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");
}
});
});