현재 주소 복사하기 버튼 만드는 방법 문의입니다. 채택완료
우성짱
5년 전
조회 3,164
위와 같이 구현해봤는데요.
주소를 숨기는 방법이 있을까요? 주소를 hidden으로 주니 복사가 안되더라구요.
위 소스는
</p>
<p><script></p>
<p>$(function() { // 주소 복사하기 자바스크립트</p>
<p> const profileShare = document.getElementById('share_url'); //buttn의 ID값인 share_url를 지정.</p>
<p> </p>
<p> profileShare.addEventListener('click', function(e) { //buttn의 ID값인 share_url를 클릭하면</p>
<p> e.preventDefault();</p>
<p> </p>
<p> //input의 id인 share-url-input value값을 복사.</p>
<p> document.execCommand('copy', false, document.getElementById('share-url-input').select());</p>
<p> //alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요.'); // alert창을 띄워서 확인.</p>
<p> document.getElementById('share-url-input').blur();</p>
<p> });</p>
<p>});</p>
<p></script></p>
<p>
위 내용과
</p>
<p> <!-- 주소 복사 영역 시작 --></p>
<p> <div id="bo_v_btn_group" class="clearfix text-center py-4 px-3 en"></p>
<p> <div class="btn-group btn-group-lg" role="group"></p>
<p> <button type="button" class="btn btn-basic" data-toggle="tooltip" data-placement="top" data-original-title="클릭하면 주소가 복사됩니다." id="share_url"></p>
<p> <i class="fa fa-clipboard" aria-hidden="true"> 주소복사</i></p>
<p> <span class="sr-only">주소 복사</span></p>
<p> </button></p>
<p> <input type="text" name="주소 복사" value="<?=urldecode($urlencode)?>" id="share-url-input"></p>
<p> </div></p>
<p> </div></p>
<p> <!-- 주소 복사 영역 끝 --></p>
<p>
위 내용의 조합입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 5개
�
우성짱
5년 전
�
진서기
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
여러 답변들이 있으니 참고하세요.
이렇게 하면 되네요. 화면 밖으로 보내기!
https://stackoverflow.com/questions/31593297/using-execcommand-javascript-to-copy-hidden-text-to-clipboard
여러 답변들이 있으니 참고하세요.
�
우성짱
5년 전
아 ㅋㅋ 밖으로 보내는 방법도 있겠군요 ㅎㅎ
좀더 찾아보도록 하겠습니다.
감사합니다.
좀더 찾아보도록 하겠습니다.
감사합니다.
�
우성짱
5년 전
일단 화면 밖으로 날렸습니다 ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
5년 전
복사가 시작되기전 (execCommand('copy'))전에
input이나 textarea 엘리먼트를 생성해주고, 그 안에 주소값을 넣어줍니다.
그리고 .select()를 이용해 주소값을 드래그해주고,
execCommand('copy')
를 실행한다음
생성한 input 엘리먼트를 삭제해줘야합니다.
type=hidden이든, visibilty hidden이든, display : none 이든.. 안보이면
select()가 안되더라구요..
로그인 후 평가할 수 있습니다
답변에 대한 댓글 5개
�
우성짱
5년 전
감사합니다. 해보겠습니다.
�
우성짱
5년 전
아직 조립만 할 수 있는 지식 수준이라 좀더 찾아봐야겠네요 ㅠㅠ
데이터는 나오는데 그걸 값을 입력해주는게 어렵네요.
데이터는 나오는데 그걸 값을 입력해주는게 어렵네요.
�
조나단입니다
5년 전
https://velog.io/@godori/js-clipboard-copy
이글보고 만들었었는데
어느정도 참고가 되실것 같습니다
이글보고 만들었었는데
어느정도 참고가 되실것 같습니다
�
핫워드
5년 전
@조나단입니다 님하고 같은 글이라 삭제했습니다.
�
우성짱
5년 전
읽어보니 ios 사파리 문제가 있나보군요
그냥 클립보드js를 쓰는게 제일 무난할 것 같네요.
감사합니다.
그냥 클립보드js를 쓰는게 제일 무난할 것 같네요.
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
숨겨지는데, 복사가 안되네요 ㅠㅠ
아무래도 자바스크립트에서 select를 해야 복사를 할 수 있는 듯 합니다.
즉 실제로 텍스트가 있어야 복사가 되는 것 같네요.