javaScript] label을 이용한 워터 마크(water mark)
<style type="text/css">
.label_view {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
.i_label {
padding:5px 0px 0px 5px;
color:#888;
position: absolute;
visibility: visible;
}
</style>
<script type="text/javascript">
$(function() {
// 워터 마크
$("#imageFile0").on("focus", function() {
$("label[for=" + $(this).attr("id") + "]").hide();
}).on("blur", function() {
if ($.trim($(this).val()) == "") {
$("label[for=" + $(this).attr("id") + "]").show();
}
});
});
</script>
<div class="label_view">
<label class="i_label" for="pwd">비밀번호</label>
<input type="password" name="pwd" id="pwd" maxlength="50" title="비밀번호 입력" autocomplete="off">
</div>
<html>
<head>
<style>
.label_view {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
.i_label {
top: 6px;
left: 8px;
font-size: 11px;
font-family: dotum;
color: #444;
line-height: 149%;
}
</style>
</head>
<body>
<br>
<br>
<div class="label_view">
<label style="position: absolute; visibility: visible;" class="i_label" for="top_sub_login_pwd">비밀번호</label>
<input type="password" name="pwd" id="top_sub_login_pwd" maxlength="50" title="비밀번호 입력" class="i_text" value="" autocomplete="off">
</div>
<br>
<br>
<div class="label_view">
<label style="position: absolute; visibility: visible;" class="i_label" for="top_sub_login_pwd">비밀번호</label>
<input type="password" name="pwd" id="top_sub_login_pwd" maxlength="50" title="비밀번호 입력" class="i_text" value="" autocomplete="off">
</div>
<br>
<br>
</body>
</html>