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

본문 바로가기

검색취소

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

검색 이전 목록

본문

2009718857_T6mKcJ5A_aasa.gif

샘플

http://jysoft.co.kr/sample/input_text/


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() {

    /**** 1. 텍스트이용 ****/
    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");
    });

    /**** 2. 백그라운드이용 ****/
    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(http://jysoft.co.kr/sample/input_text/img/txt_notice.gif) no-repeat 5px 6px;}

등록된 댓글이 없습니다.

검색취소

jquery

검색
  • 눈여겨 볼만한 jQuery 플러그인
  • 눈여겨 볼만한 jQuery 플러그인

    이미지 갤러리.. 1. FUll Size Images Viewer- 간단한 제품사진보기, 이미지 갤러니 Thumb Nail 이미지 보기에 사용하면 제격-  http://www.addfullsize.com/ 2. Aj…

  • no image
  • 모달에 z-index 변경

    배추빌더 게시판 팝업 z-index 수정mw.lib/mw.skin.basic.lib.php                $(function() {            $("#dialog-message-$vie…

  • jQuery로 ajax 호출시 로딩중 이미지 보여주기
  • jQuery로 ajax 호출시 로딩중 이미지 보여주기

    요즘 유명 메이져사이트를 방문해보면 페이지 로딩 속도가 상당히 빨라졌다는 느낌이 들때가 있습니다. 방문자가 늘어난다고 서버시스템의 사양을 계속해서 높이거나 서버를 분산하기보다는최대한 효율적인 방법으로 서버의 부하를 …

  • no image
  • jQuery 합성이벤트 toggle() hover()

    jQuery 합성이벤트 toggle() hover() 보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 …

  • JQuery Hover Effects
  • JQuery Hover Effects

    첨부파일

    마우스 오버시 이벤트(이펙트)가 발생된다. 듀얼, 슬라이딩, 회전, 줌 등등 ... 7가지 이펙트를 지원해준다.워낙 유명한 사이트임.

?>