티스토리 뷰

Mobile

모바일기기에서 클립보드 복사기능에 대한 이슈

후늬뉨 2016. 5. 13. 16:43

모바일기기에서 클립보드 복사기능이 가능한가?

안드로이드 + chrome (version 42+) 브라우저에서만 가능함.

IOS는 불가.

클립보드 복사가 안되는 환경에서는 어떻게 대체하는가?

a태그를 활용하여 길게 선택하도록 유도한다. (네이버, 다음의 뉴스 공유하기 참조)

클립보드 복사구현은 구글에서 찾은 clipboardjs 플러그인을 사용하면 편하다.

clipboardjs : https://clipboardjs.com/



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
37
38
39
40
41
42
43
44
45
46
47
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<a id="clipURL" href="http://페이지URL" style="display:block; border: 1px solid silver; padding: 10px;" onclick="return false;">http://페이지URL</a>
<br>
<button type="button" id="btnCopyClip" data-clipboard-action="copy" data-clipboard-target="#clipURL" style="width: 100px;height: 30px;line-height:30px;text-align: center; border: 1px solid silver;">URL복사</button>
<br>
<span id="txtCopyClip">URL을 길게 누르면 복사하실 수 있습니다.</span>
<script type="text/javascript">
$(document).ready(function(){
 
    var clipboardSupport = true;
 
    try {
        $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
 
        var version = $.browser.version;
        version = new Number(version.substring(0, version.indexOf(".")));
 
        //모바일 접속인지 확인
        if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i))) {
            //클립보드 복사기능이 될경우 (크롬 42+)
            if ($.browser.chrome == true && version >= 42) {
                clipboardSupport = true;
            } else {
                clipboardSupport = false;
            }
        }
    } catch(e) {
    }
 
    if (clipboardSupport) {
        $("#btnCopyClip").show();
        $("#txtCopyClip").hide();
    } else {
        $("#btnCopyClip").hide();
        $("#txtCopyClip").show();
    }
 
    var clipboard = new Clipboard('#btnCopyClip');
    clipboard.on('success', function(e) {
        alert("주소가 복사되었습니다.\n\n원하는 곳에 붙여넣기 해주세요.");
    });
    clipboard.on('error', function(e) {
        alert("접속중인 기기및 브라우저에서는\n클립보드 복사를 지원하지 않습니다.\nURL을 길게 누르면 복사하실 수 있습니다.");
    });
 
});
</script>


댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
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
글 보관함