태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

input 박스에 안내문구 나타내기

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

추천 목록

번호	제목
2,255	마우스오버 롤링이미지를 jQuery로 변경하기
2,254	PHP 처리속도 올리기
	input 박스에 안내문구 나타내기
2,252	input textarea 포커스시 효과주기
2,251	css background sprites
2,250	Jquery 모음
2,249	오른쪽 마우스 클릭시 나타나는 메뉴
2,248	테이블 점선테두리 만들기
2,247	배경이미지 제어하기(고정하기)
2,246	글자 줄바꿈과 줄바꿈 금지
2,245	Input 박스에 사라지는 배경 넣기
2,244	텍스트 overflow
2,243	border-style속성의 값
2,242	Input 박스에 포커스 되었을때 스타일 변경
2,241	CSS Intro
2,240	CSS용어 정리
2,239	JavaScript Copy to Clipboard
2,238	부모dom 의 넓이에 따라 자동으로 넓이 조절하기
2,237	3D 입체 갤러리 (바람개비 느낌) 상,하,좌,우 드래그 가능
2,236	3D 입체 갤러리
2,235	아이폰, 안드로이드 바탕화면에 바로가기 만들기
2,234	웹호스팅 이용자가 업로드 용량 늘리기
2,233	이미지가 클 경우 테이블이 늘어났다가 줄어들때
2,232	cut - 문자열 자르기
2,231	PHP 코딩 스타일
2,230	국내IP 정보 조회하는 클래스(php)
2,229	php->xml 생성하는 class
2,228	socket이용한 타사이트 이미지 읽기
2,227	사이즈가 큰이미지 웹페이지 출력시 자동으로 사이즈 줄이기...
2,226	php로 작성한 간단 RSS2.0 리더