우기블로그

IT·인터넷

jquery 엔터키 이벤트(enterEvent Key) 처리 하는법

ukidugi 2015. 6. 30.




안녕하세요 jquery 엔터 이벤트에 대해 알아보도록 하겠습니다.

엔터키 처리 이벤트는 참으로 간단하면서도 적용 할려고 하면 어려운게 사실인데요.


그래서! 블로그에 올려서 필요할때 쓰고 사람들이랑 공유도 할 겸 올립니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
 
enterEvent('uni_name', 'codeUiAddress()');
        
enterEventId('address', 'codeAddress()');
 
function codeUiAddress(){
    alert($("uni_name").val());
}
 
 
 
function enterEvent(class_name, fn_name) {
        $("." + class_name).keyup(function(event) {
            if (event.keyCode == 13) {
                eval(fn_name);
                return;
            }
        });
    }
 
    function enterEventId(id_name, fn_name) {
        $("#" + id_name).keyup(function(event) {
            if (event.keyCode == 13) {
                eval(fn_name);
                return;
            }
        });
    }
</script>
 
<body>
<input type="text" id="uni_name" class="uni_name" placeholder="학교 이름을 검색해주세요" style="width: 210px;"onClick="this.value='';"> 
<input type="button" value="Click" class="button" onclick="codeUiAddress()" /> 
</body>
 


엔터이벤트는 상당히 간단합니다.


function enterEvent(class_name, fn_name) {
        $("." + class_name).keyup(function(event) {
            if (event.keyCode == 13) {
                eval(fn_name);
                return;
            }
        });
    }


enterEvent('uni_name', 'codeUiAddress()');


이 함수 input class를 이용하여 엔터키 처리하는 함수인데요. 여러개 input type을 한번에 엔터키 적용하는 함수입니다

첫번째 파라미터에다가 input 클래스를 적어주시면 되고 두번째 파라미터는 button 타입 또는 a 태그 호출하는 함수를 적어주시면 됩니다.

해당 input text 클래스 엔터키가 되는 함수 입니다.


function enterEventId(id_name, fn_name) {
        $("#" + id_name).keyup(function(event) {
            if (event.keyCode == 13) {
                eval(fn_name);
                return;
            }
        });
    }


위에 함수와 비슷하 지만 한가지 차이점이 있습니다.

위에 내용은 클래스를 이용하여 엔터이벤트 처리를 한다면 이 함수는 해당 input id 로 특정 text 사용할때 주로 쓰는 함수입니다.


enterEventId('address', 'codeAddress()');

엔터키를 처리 하는 함수를 적어주시면 적용되는 걸 확인할 수 있습니다.

id를 엔터키 처리 할 수 있는 함수는 첫번째가 id 두번째 파라미터가 함수는호출명 써주시면 됩니다.



이상 엔터키 이벤트처리 하는법을 알려드렸습니다 감사합니다


▼ 공감 눌러주시면 감사합니다 :D

저작자표시 (새창열림)

'IT·인터넷' 카테고리의 다른 글

JSON 값 맵 형태로 바꾸기  (0) 2015.07.03
티스토리 네이버 검색유입 된다.  (0) 2015.07.01
input disabled 타입을 ajax form 형식으로 보내기  (0) 2015.06.27
인스턴트 뮤직(Instant Muzic)크롬 웹스터 어플로 노래,음악 공짜로 듣기!  (0) 2015.06.27
티스토리 블로그 네이버 검색 연동 해보자  (5) 2015.06.25

댓글

티스토리툴바