본문 바로가기
JAVA/javascript, jQuery

JQuery - event안의 blur처리

by 설총이 2018. 7. 9.

JQuery 이벤트 :: 이벤트가 발생하는 시점에 JQuery를 실행


on() : 새롭게 만들어지는애한테도 이벤트를 적용시킬수있는 애

-> 기본적으로 JQuery 객체를 리턴하지만 메서드의 전달인자로 추가적인 선택자를 명시하면

최초 요소의 하위를 재탐색하며 리턴한다.


mousedown() : 마우스버튼이 눌려있는상태(아직안뗌)

mouseup() : 마우스버튼을 눌려져있는채에서 뗀상태

mouseover() : 해당영역에 올라갔을때

mouseout() : 해당영역에서 벗어났을때

mousemove() : 마우스 이동할때마다 출력


1
2
3
4
5
6
7
8
<script>
    $(function(){
        //p태그의 html이 가지고있는 속성중 clientX / clientY 를 출력한다.
        $("img").mousemove(function(e){
            $("p").html("현재 X좌표 : "+e.clientX+"<br/>현재 Y좌표 : "+e.clientY);
        });
    });
</script>
cs



val() : 값을 가져오는애

val(..) : 기존값을 입력값으로 변경

one() : 한번만 실행하는애


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    $(function(){/*폼창에 입력하기전에 value값으로 보여주고,
        포커스(커서)가 클릭되는 순간 사라진다.*/
        $("input").val("입력해 주세요").css("color","#FE8283").one("focus" , function(){
            $(this).val("").css("color" , "#000");
        })
 
        /*입력했다가 다시 빈공백이되어도 입력해주세요라고 떠야하기때문에
        blur처리후에 if문으로 다시 입력해주세요라는 value값이 나오도록하게만든다*/
        .blur(function(){
            if($(this).val()==""){
                $(this).val("입력해 주세요").css("color" , "#FE8283").one("focus" , function(){
                    $(this).val("").css("color""#000");
                });
            }
        });
    });
</script>
 
cs