[JavaScript] 자바스크립트 ur,text 복사 클립보드, 주소복사 버튼 또는 링크 만들기 -익스,파폭,크롬

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: http://jang8584.tistory.com/135

 

 

[url 복사 클립보드] 익스,파폭,크롬 가능 clipboardData.setData 대신 사용하는 소스

1. 이렇게 소스화 한다면, ie9 까지는 무난하게 클립보드로 복사가 가능하다.
하지만 크롬에서는 window.clipboardData.setData 이 소스가 동작하지 않는다.

<script type="text/javascript">

function ClipUrl(){

 

oViewLink = $( "ViewLink" ).innerHTML;

//alert ( oViewLink.value );

window.clipboardData.setData("Text", oViewLink);

alert ( "주소가 복사되었습니다. \'Ctrl+V\'를 눌러 붙여넣기 해주세요." );

 

}

< /script>

<div class="copy-link"><span id="ViewLink">http://aaaa.com/aaa/12312</span> <img src="../ico-url-copy.png" border="0" alt="주소복사" onclick="ClipUrl()">

 

 

2. 그래서 아래와 같은 소스를 사용하여, 크롬이나 파폭에서도 클립보드를 복사할 수 있도록 소스를 수정한다. 
크롬에서 클립보드가 동작하는것을 확인 하였다.

 

<div class="code">

<code>

<script type="text/javascript"><!--

function copy_trackback(trb) {

var IE=(document.all)?true:false;

if (IE) {

if(confirm("이 글의 트랙백 주소를 클립보드에 복사하시겠습니까?"))

window.clipboardData.setData("Text", trb);

} else {

temp = prompt("이 글의 트랙백 주소입니다. Ctrl+C를 눌러 클립보드로 복사하세요", trb);

}

}

//--></script>

</code>

</div>

 

< div class="entry fix" style="padding: 0 5px; border: solid 1px #CCCCCC">

<center>이 글의 트랙백 주소 복사하기 :

<code>

<a href="http://aaaa.com/aaa/12312" onclick="copy_trackback(this.href); return false;">aaaaaaaaa

</a>

</code>

</center>

</div>

 

 

 

=================================

=================================

=================================

 

 

 

<script>

function copy_trackback(address) {

var IE=(document.all)?true:false;

if (IE) {

if(confirm("이 글의 주소를 클립보드에 복사하시겠습니까?"))

window.clipboardData.setData("Text", address);

} else {

temp = prompt("이 글의 주소입니다. Ctrl+C를 눌러 클립보드로 복사하세요", address);

}

}

</script>

 

<a href="주소" onclick="copy_trackback('http://cyberoro.com'); return false;">링크</a>

 

 

=================================

=================================

=================================

 

 

 

출처: http://cpdev.tistory.com/42

 

IE에 경우 window.clipboardData.getData() 함수를 이용하여 클립보드에 내용을 가져올수 있지만, 

Chrome에 경우 보안상에 이유로 바로 접근이 불가능 합니다. 

그래서 아래와 같이 paste 이벤트시 내용을 가져오는것으로

처리 할 수 있습니다. 

 

:: javascript 

function handlePaste (e) {
    var clipboardData, pastedData;
 
    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();
 
    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    
    // Do whatever with pasteddata
    alert(pastedData);
}
document.getElementById('testId').addEventListener('paste', handlePaste);

 

:: html

<input type="text" id="testId">

 

위와 같이 하고 input창에서 붙여넣기를 할 경우 클립보드에 내용이 출력되는걸 확인할 수 있습니다. 

ie, chrome 모두 이상없이 동작합니다. 

 

:: jsfiddle

 

 

출처 : http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser

출처: http://cpdev.tistory.com/42 [하루하나]

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://euntori7.tistory.com/287

 

clipboard 복사 스크립트. flash를 사용하지 않고 스크립트로만 함.

크롬, 파이어폭스, ie10 테스트 완료

 

방법은.. input박스를 안보이게 하나 만들고, 그 안에 value값을 집어넣어서 select되게 한후 복사하는 방법.

주의할 점은 input박스를 hidden처리하면 안된다. display:none도 하면 안되고 opacity를 0으로 하거나 position을 absolute로 해서 가려지게 해야함.

 

cord <a class="clipboardBtn" href="#" onclick="">ns1.sdsns.com</a> <a class="clipboardBtn" href="#" onclick="">211.115.203.112</a>

<a class="clipboardBtn" href="#" onclick="">ns2.sdsns.com</a> <a class="clipboardBtn" href="#" onclick="">211.239.157.110</a> <input id="clip_target" type="text" value="" style="position:absolute;top:-9999em;"/>

jquery $('.clipboardBtn').on('click', function(e) { // a의 텍스트값을 가져옴 var text = $(this).html(); //숨겨진 input박스 value값으로 text 변수 넣어줌. $('#clip_target').val(text); //input박스 value를 선택 $('#clip_target').select(); // Use try & catch for unsupported browser try { // The important part (copy selected text) var successful = document.execCommand('copy'); // if(successful) answer.innerHTML = 'Copied!'; // else answer.innerHTML = 'Unable to copy!'; } catch (err) { alert('이 브라우저는 지원하지 않습니다.') } })

 

출처: http://euntori7.tistory.com/287 [euntori.blog]

 

 

=================================

=================================

=================================

 

 

 

출처: http://ssohyeonpark.tistory.com/5

 

PC웹과 모바일웹 클립보드 복사기능을 개발하였다.

 

PC 웹

function fnCopyLink() {
    var IE = (document.all) ? true : false;
    if (IE) {
         window.clipboardData.setData('Text', $("#아이디").val());//링크 주소 복사
                alert("복사되었습니다.");
    } else {
                alert("Ctrl+C를 눌러 복사해주세요.");
    }
 }

클립보드 복사 기능을 알아보던 중, 크롬에서는 window.clipboardData.setData()가 안먹힌다는 것을 알게 되었다.

따라서 어쩔 수 없이 알럿처리로 해결하였다. 

 

 

모바일 웹
모바일 웹페이지에 클립보드 기능을 추가하려면 PC웹과 다르게 JS파일을 하나 추가 해주어야한다.
[Javascript]

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script> 
 
$(document).ready(function () {
 
        var clipboard = new Clipboard('.clipboard');//로드 시 한번 선언 
 
});
 

 

[Html]

<input type="text" value="" id="txt_MyLink"/>
<a href="javascript:;" class="clipboard"  data-clipboard-target="#txt_MyLink"></a>

 

 

a 태그에  data-clipboard-target="#텍스트 태그 아이디"를 설정하면 텍스트 태그값이 복사된다.

 

 

=================================

=================================

=================================

 

 

 

출처: http://godwithus.tistory.com/250

 

$("button").click(function(){     $("textarea").select();     document.execCommand('copy'); });

<script src="http://code.jquery.com/jquery-3.2.1.js"></script> <button>Select</button> <br/> <textarea></textarea>

테스트 해보니 크롬, 익스플로어에서 모두 잘 된다 ㅎㅎ

위의 소스는 textarea 의 텍스트를 클립보드로 복사하는 예제이다

 

출처 stackoverflow

출처: http://godwithus.tistory.com/250 [우물물아 넘쳐나라!]

 

 

 

반응형

 

 

728x90

 

 

=================================

=================================

=================================

 

 

 

출처: http://hosting.websearch.kr/entry/url-%EB%B3%B5%EC%82%AC-%ED%81%B4%EB%A6%BD%EB%B3%B4%EB%93%9C-%EC%9D%B5%EC%8A%A4%ED%8C%8C%ED%8F%AD%ED%81%AC%EB%A1%AC-%EA%B0%80%EB%8A%A5-clipboardDatasetData-%EB%8C%80%EC%8B%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%86%8C%EC%8A%A4

여러분들께서 더 많은 자료를 원하신다면. 아래 링크로 가서 확인해 보시기 바랍니다. 꾸준한 업데이트는 되지 못하여도. 여러분들이 찾고자 하는 소스, code, 프로그램 등의 정보를 얻을 수 있을 것입니다.   무료프로그램|HTML·자바스크립트|응용·변수|PHP·JSQ|ASP.NET·AJAX| |응용·API|SERVER·WINDOW|SQL·DB·보안|그누보드·보드|모바일SNS|   많은 정보를 보시고 찾고자 하는 문제를 해결하였으면 좋겠습니다. 게시판에 질문주시면 답변도 달아드립니다.

[url 복사 클립보드] 익스,파폭,크롬 가능 clipboardData.setData 대신 사용하는 소스

1. 이렇게 소스화 한다면, ie7 까지는 무난하게 클립보드로 복사가 가능하다.
하지만 크롬에서는 window.clipboardData.setData 이 소스가 동작하지 않는다.

<script type="text/javascript">

function ClipUrl(){

 

oViewLink = $( "ViewLink" ).innerHTML;

//alert ( oViewLink.value );

window.clipboardData.setData("Text", oViewLink);

alert ( "주소가 복사되었습니다. \'Ctrl+V\'를 눌러 붙여넣기 해주세요." );

}
</script>

<div class="copy-link"><span id="ViewLink">http://aaaa.com/aaa/12312</span> <img src="../ico-url-copy.png" border="0" alt="주소복사" onclick="ClipUrl()">

 

 

 
2. 그래서 아래와 같은 소스를 사용하여, 크롬이나 파폭에서도 클립보드를 복사할 수 있도록 소스를 수정한다. 
크롬에서 클립보드가 동작하는것을 확인 하였다. 

 

<div class="code">

    <code>

        <script type="text/javascript"><!--

            function copy_trackback(trb) {

                var IE=(document.all)?true:false;

                if (IE) {

                    if(confirm("이 글의 트랙백 주소를 클립보드에 복사하시겠습니까?"))

                        window.clipboardData.setData("Text", trb);

                } else {

                    temp = prompt("이 글의 트랙백 주소입니다. Ctrl+C를 눌러 클립보드로 복사하세요", trb);

                }

            }

        //--></script>

    </code>

</div>

 

<div class="entry fix" style="padding: 0 5px; border: solid 1px #CCCCCC">

    <center>이 글의 트랙백 주소 복사하기 :

        <code>

            <a href="http://aaaa.com/aaa/12312" onclick="copy_trackback(this.href); return false;">aaaaaaaaa

            </a>

        </code>

    </center>

</div>

출처: http://hosting.websearch.kr/entry/url-복사-클립보드-익스파폭크롬-가능-clipboardDatasetData-대신-사용하는-소스 [웹호스팅정보 - 호스팅 프로그램 쇼핑몰 이미지 폰트 리뷰]

 

 

=================================

=================================

=================================

 

 

 

출처: https://www.technote.co.kr/php/technote1/board.php?board=apple&config=&command=body&no=1556&

 

아이폰 아이패드와 안드로이드가 방식이 달라서 다시 올립니다.

 

어제 올린것은 애플쪽만 됩니다.

 

삼성폰인 안드로이드는 복사버튼을 클릭해야하네요..

 

아래 소스는 구글링으로 찾은 것이고 약간 수정을 보탯습니다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>

 

<script type="text/javascript">

$(document).ready(function(){

 

$("#btnCopyClip").click(function(){

$("#clipURL").css("display", "block");

});

 

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("주소가 복사되었습니다.");

$("#clipURL").css("display", "none");

});

clipboard.on('error', function(e) {

alert("복사버튼을 클릭해주세요.");

 

setTimeout(function() {

$("#clipURL").css("display", "none");

}, 10000); // 최하 1000 임 1초

 

});

 

});

</script>

 

 

<button type="button" id="btnCopyClip" data-clipboard-action="copy" data-clipboard-target="#clipURL" style='border:0'>URL복사</button>

 

<a id="clipURL" href="http://technote.co.kr" style="display:none; border: 1px solid silver; padding: 10px;" onclick="return false;">http://technote.co.kr</a>

<span id="txtCopyClip" style="display: none;">URL을 길게 누르면 복사하실 수 있습니다.</span>

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://naminsik.com/blog/3393

 

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

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

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

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

 

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

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

 

1 2	<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>

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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’ 의 경우는 간혹 안드로이드에서 처리가 안되는 디바이스가 생길 수 있다.
그럴 때를 대비해서 경고창의 띄워주고 해당 텍스트 박스가 셀렉트 되어 있게 만들어준다.

 

 

 

=================================

=================================

=================================

 

 

 

*기타관련링크

- https://clipboardjs.com/

 

 

=================================

=================================

=================================