이미지 클릭시 글자 복사되게!
본문
안녕하세요
문의를 드립니다!
아래 소스를 적용하니 작동은 잘 되는데요
계좌숫자를 가리고 싶어서
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>
width: 0;
height: 0;
font-size: 0;
line-height: 0;
그냥 스타일 적용해서 안보이게 처리했습니다!
감사합니다!