테스트 사이트 - 개발 중인 베타 버전입니다

이미지 클릭시 글자 복사되게! 채택완료

행복의길 3년 전 조회 3,443

안녕하세요

문의를 드립니다!

 

아래 소스를 적용하니 작동은 잘 되는데요

계좌숫자를 가리고 싶어서

style="display:none" layer 안에 넣으니 계좌는 복사가 안되네요 

경고문만 뜨고요

 

어찌해야 할까요?

도움을 청합니다!

 

 

<script>

    function copyT() {

        var obj = document.getElementById("copyTxt");

        var range = document.createRange();

        range.selectNode(obj.childNodes[0]); //텍스트 정보를 Range 객체에 저장

        //range.setStart(obj.childNodes[0], 0); //추가

        //range.setEnd(obj.childNodes[0], 5); //추가

        var sel = window.getSelection();

        sel.removeAllRanges(); //기존 선택정보 삭제

        sel.addRange(range); //텍스트 정보 선택

        document.execCommand("copy"); //복사

        sel.removeRange(range); //선택 정보 삭제

        alert('계좌번호가 복사 되었습니다! 보내실 은행 어플에서 붙여 넣기로 이체하시면 됩니다! 대사본을 후원해 주셔서 대단히 감사합니다!:)');

    }

</script>

 

<input type = "image" src = "images/index_14.png"  width="100%" height="auto" value="대사본 후원하기" onclick="copyT()"/>

<div id="copyTxt">1234567890</div>      

 

아니면 좋은 소스 좀 있으면 공유 부탁드려요~*

 

 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
3년 전

Clipboard API 사용하면 되는데

 

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard

http 프로토콜에서는 에러발생하고

https 프로토콜이나 로컬파일 프로토콜에서 동작합니다.

 

</p>

<p><style>

#copyTxt { display: none; }

#msg {

    position: absolute;

    top: -20%;

    left: calc(50% - 15em);

    width: 30em;

    background-color: lightyellow;

    border-radius: 1em;

    padding: 1em;

    opacity: 0;

    transition-duration: 0.5s;

    transition-property: top, opacity;

}

#msg.show {

    top: 10;

    opacity: 1;

}

</style></p>

<p><script>

    function copyT() {

        var obj = document.getElementById("copyTxt");</p>

<p>        // var data = obj.innerText;

        var data = '[' + (new Date()).toISOString() + '] ' + obj.innerText;</p>

<p>        navigator.clipboard.writeText(data).then(() => {

            var msg = document.getElementById('msg');

            var data_stay = parseInt(msg.getAttribute('data-stay'), 10);

            if (isNaN(data_stay) == true) {

                data_stay = 2000;

            }</p>

<p>            msg.innerHTML = '계좌번호가 복사 되었습니다! 보내실 은행 어플에서 붙여 넣기로 이체하시면 됩니다! 대사본을 후원해 주셔서 대단히 감사합니다!:)';

            msg.className = 'show';</p>

<p>            var t = setTimeout(function () {

                msg.className = '';

                clearTimeout(t);

            }, data_stay);

        });

    }

</script></p>

<p> </p>

<p><input type="button" value="대사본 후원하기" onclick="copyT()"/></p>

<p><div id="copyTxt">1234567890</div></p>

<p>
<textarea placeholder="Test the copied data&#10;paste : Ctrl + V" rows="5" cols="50"></textarea>

<div id="msg" data-stay="3000"></div></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

 width: 0; 
 height: 0;
 font-size: 0;
 line-height: 0;

 

그냥 스타일 적용해서 안보이게 처리했습니다!

감사합니다!

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인