현실적으로 ios와 안드로이드 및 pc를 만족시키는 클립보드 스크립트는 없다.
기기마다 또는 os 마다 보안 정의도 다르기 때문이기도 하다.

아무튼 이 모든 기기를 만족시켜주기 위해서 두개의 플러그인을 사용해서 이용해보았다.

• clipboard.js : https://clipboardjs.com/
• copy2clipboard.js

자세한 사용법은 각 사이트를 참고하면 되고, 아래는 작성해본 코드이다.

<script src="./js/clipboard.min.js"></script>
<script src="./js/copy2clipboard.js"></script>

head 안에 넣어서 스크립트를 로드 시킨다.

<textarea name="copytextarea" id="copytextarea" cols="30" rows="2" readonly>http://naminsik.com</textarea>       
 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#copytextarea">복사</button>

텍스트 박스와 버튼을 만들어 넣는다.

<script>
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
        $('.btn').text('복사글 선택');
        $('.btn').on('click', function(e){
            select_all_and_copy(document.getElementById("copytextarea"));
        });
    } else {
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            alert('복사 되었습니다.');
            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            alert('선택된 텍스트를 복사하세요.');
        });
    }        
</script>

아이폰일 경우에는 '복사' 버튼이 '복사글 선택'으로 명칭이 바뀐다.
복사가 안되기 때문에 복사 할 수 있게 선택 영역을 잡고 복사버튼이 나오는 말풍선을 띄우는 것까지 하는 것이다.

그리고 clipboard.on('error' 의 경우는 간혹 안드로이드에서 처리가 안되는 디바이스가 생길 수 있다.
그럴 때를 대비해서 경고창의 띄워주고 해당 텍스트 박스가 셀렉트 되어 있게 만들어준다.