현재 주소 복사하기 버튼 만드는 방법 문의입니다.
본문
위와 같이 구현해봤는데요.
주소를 숨기는 방법이 있을까요? 주소를 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()가 안되더라구요..
감사합니다. 해보겠습니다.
아직 조립만 할 수 있는 지식 수준이라 좀더 찾아봐야겠네요 ㅠㅠ
데이터는 나오는데 그걸 값을 입력해주는게 어렵네요.
https://velog.io/@godori/js-clipboard-copy
이글보고 만들었었는데
어느정도 참고가 되실것 같습니다
@조나단입니다 님하고 같은 글이라 삭제했습니다.
읽어보니 ios 사파리 문제가 있나보군요
그냥 클립보드js를 쓰는게 제일 무난할 것 같네요.
감사합니다.
