 |
|
| |
|
  |
12년 전
|
HTML
<h1>input 박스에 안내 문구 넣기</h1>
<div class="sector">
<h2>1. 텍스트이용</h2>
<div class="exam_area1">
<input type="text" name="input_exam1" id="input_exam1" class="normal_box" />
<label for="input_exam1"><span>10자</span> 이상 입력하세요.</label>
</div>
</div>
<div class="sector">
<h2>2.백그라운드이용</h2>
<input type="text" name="input_exam2" class="normal_box txt_bg" />
</div>
jQuery
<script type="text/javascript">
$(function() {
var input1 = $("input[name=input_exam1]");
var label1 = $("label[for=input_exam1]");
input1.focus(function(){
label1.css("display","none");
});
input1.blur( function() {
if(!$.trim(input1.val())) label1.css("display","block");
else label1.css("display","none");
});
var input2 = $("input[name=input_exam2]");
input2.focus(function(){
input2.removeClass("txt_bg");
});
input2.blur( function() {
if(!$.trim(input2.val())) input2.addClass("txt_bg");
else input2.removeClass("txt_bg");
});
});
</script>
CSS
body, input {font-family:dotum; font-size:12px; color:#1c1d24;}
.sector {padding:20px 10px;}
input.normal_box {margin:0; padding:5px 0 4px 5px; width:200px; border:1px solid #cccccc;}
.tip {color:#777777;}
.exam_area1 {position:relative;}
.exam_area1 label {position:absolute; top:6px; left:5px; top:8px\9;}
.exam_area1 label span {color:#f7651e;}
.exam_area1 .normal_box {}
.txt_bg {background:url(이미지주소) no-repeat 5px 6px;}
|
|
 추천 : 685 |
추천
목록
|
|
| |
|
