티스토리 뷰

카테고리 없음

javaScript] label을 이용한 워터 마크(water mark)

James Wetzel 2014. 11. 16. 14:59
728x90
반응형

<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>

728x90
반응형
저작자표시 비영리 동일조건