JQuery로 ctrl+v 이벤트 잡아내기

REF#1: http://unixpapa.com/js/key.html

REF#2: http://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript

REF#3: http://stackoverflow.com/questions/686995/jquery-catch-paste-input

 

결론부터 말씀드리면 ‘ctrl+v’ 이벤트를 잡지말고 ‘붙여넣기’ 이벤트를 잡으세요.

ctrl+v 이벤트를 잡기가 매우 주옥같은 이유는 뭐냐면 애플컴퓨터들(맥시리즈)을 고려해야 하기 때문입니다.

REF#1, 2를 보시면 아시겠지만 파폭, 오페라, 웹킷이 다 다르고 심지어 일반 알파벳 키코드도 다른경우가 있습니다.

 

제가 하려고 했던건 더팩트(http://www.thefact.kr/)에서 댓글에 URL이 입력되면 자동으로 첨부해주는(페이스북처럼) 기능이었습니다.

위의 내용으로 한참 고민하다가 ‘붙여넣기 이벤트가 없나?’ 하는 생각에 REF#3을 검색하게 되었네요.

JQuery의 bind 명령어에 이벤트 이름을 ‘paste’로 주면 해결됩니다.

$(".inputTextArea").bind('paste',function(e){
        var el = $(this);
        setTimeout(function(){
            var text = $(el).val();
        alert(text);
        },100);
});

 

위에서 다루는 이슈는 하나 더 있는데, 클립보드 입니다.

제가 클립보드에 접근하려는 이유는 지금 붙여넣기 하는 데이터(URL 주소)를 알고 싶기 때문이었습니다.

ctrl+v를 눌렀을때 keypress 이벤트 발생시점이 클립보드에 있는 데이터가 input 필드에 복사되는것 보다 앞서게 됩니다.

따라서 paste 이벤트 만으로는 암만 노력해도 복사된 데이터를 얻을 수 없습니다.

이 때 위의 코드처럼 setTimeout을 이용하여 딜레이를 살짝주면 복사된 URL이 포함된 데이터를 얻어낼 수 있게 됩니다.

 

요 내용을 적용한 결과물은 http://www.thefact.kr/issue/17 에서 확인하실 수 있습니다.(로그인을 하셔야합니다. 페북로그인지원)