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

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

QA

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

본문

3530095165_1604024376.4928.png

 

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

 

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

 

 

위 소스는

 


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

 

위 내용과

 


        <!-- 주소 복사 영역 시작 -->
        <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

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

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

방금 해보니

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

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

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

<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

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

복사가 시작되기전 (execCommand('copy'))전에

input이나 textarea 엘리먼트를 생성해주고, 그 안에 주소값을 넣어줍니다.

그리고 .select()를 이용해 주소값을 드래그해주고,

execCommand('copy')

를 실행한다음

생성한 input 엘리먼트를 삭제해줘야합니다.

 

type=hidden이든, visibilty hidden이든, display : none 이든.. 안보이면

select()가 안되더라구요..

답변을 작성하시기 전에 로그인 해주세요.
전체 30
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT