이미지 클릭시 글자 복사되게!

이미지 클릭시 글자 복사되게!

QA

이미지 클릭시 글자 복사되게!

본문

안녕하세요

문의를 드립니다!

 

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

계좌숫자를 가리고 싶어서

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

Clipboard API 사용하면 되는데

 

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

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

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

 


<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>
<script>
    function copyT() {
        var obj = document.getElementById("copyTxt");
        // var data = obj.innerText;
        var data = '[' + (new Date()).toISOString() + '] ' + obj.innerText;
        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;
            }
            msg.innerHTML = '계좌번호가 복사 되었습니다! 보내실 은행 어플에서 붙여 넣기로 이체하시면 됩니다! 대사본을 후원해 주셔서 대단히 감사합니다!:)';
            msg.className = 'show';
            var t = setTimeout(function () {
                msg.className = '';
                clearTimeout(t);
            }, data_stay);
        });
    }
</script>
 
<input type="button" value="대사본 후원하기" onclick="copyT()"/>
<div id="copyTxt">1234567890</div>
<br /><textarea placeholder="Test the copied data
paste : Ctrl + V" rows="5" cols="50"></textarea>
<div id="msg" data-stay="3000"></div>
답변을 작성하시기 전에 로그인 해주세요.
전체 123,145 | RSS
QA 내용 검색

회원로그인

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