현재 주소 복사하기 버튼 만드는 방법 문의입니다.

우성짱

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전 3,309

3530095165_1604024376.4928.png

위와 같이 구현해봤는데요.

주소를 숨기는 방법이 있을까요? 주소를 hidden으로 주니 복사가 안되더라구요.

위 소스는

Copy

<script>

$(function() { // 주소 복사하기 자바스크립트

  const profileShare = document.getElementById('share_url'); //buttn의 ID값인 share_url를 지정.

 

  profileShare.addEventListener('click', function(e) { //buttn의 ID값인 share_url를  클릭하면

    e.preventDefault();

 

    //input의 id인 share-url-input value값을 복사.

    document.execCommand('copy', false, document.getElementById('share-url-input').select());

    //alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요.'); // alert창을 띄워서 확인.

    document.getElementById('share-url-input').blur();

  });

});

</script>

위 내용과

Copy

<!-- 주소 복사 영역 시작 -->

        <div id="bo_v_btn_group" class="clearfix text-center py-4 px-3 en">

            <div class="btn-group btn-group-lg" role="group">

                <button type="button" class="btn btn-basic" data-toggle="tooltip" data-placement="top" data-original-title="클릭하면 주소가 복사됩니다." id="share_url">

                        <i class="fa fa-clipboard" aria-hidden="true"> 주소복사</i>

                        <span class="sr-only">주소 복사</span>

                </button>

                <input type="text" name="주소 복사" value="<?=urldecode($urlencode)?>" id="share-url-input">

            </div>

        </div>

        <!-- 주소 복사 영역 끝 -->

위 내용의 조합입니다.

주소복사 자바스크립트

답변 2개 / 댓글 10개

채택된 답변

+20 포인트

진서기

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

#share-url-input{display:none;}

스타일 추가하면 될듯 합니다.

답변에 대한 댓글 5개

우성짱

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

방금 해보니

숨겨지는데, 복사가 안되네요 ㅠㅠ

아무래도 자바스크립트에서 select를 해야 복사를 할 수 있는 듯 합니다.

즉 실제로 텍스트가 있어야 복사가 되는 것 같네요.

진서기

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

네 안되네요 ㅠㅠ

진서기

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

<input type="text" name="주소 복사" value="<?php echo urldecode($urlencode) ?>" id="share-url-input" style="position:absolute;left:-1000px; top:-1000px;">

이렇게 하면 되네요. 화면 밖으로 보내기!

https://stackoverflow.com/questions/31593297/using-execcommand-javascript-to-copy-hidden-text-to-clipboard

여러 답변들이 있으니 참고하세요.