반응형
<body>
<span id="textDiv">이 텍스트 값을 복사하도록 하겠습니다.</span>
<button id="copyBtn">왼쪽 텍스트 복사하기</button>
<script>
var copyBtn = document.getElementById("copyBtn");
// 버튼 클릭 이벤트
copyBtn.addEventListener("click", function(){
// 복사할 텍스트를 변수에 할당해줍니다.
var text = document.getElementById("textDiv").innerText;
// input text 태그를 생성해줍니다.
var createInput = document.createElement("input");
createInput.setAttribute("type", "text");
// 가상으로 가져올 태그에 만들어준 input 태그를 붙여줍니다.
document.getElementById("textDiv").appendChild(createInput);
// 만든 input 태그의 value 값에 복사할 텍스트 값을 넣어줍니다.
createInput.value = text;
// 복사 기능을 수행한 후
createInput.select();
document.execCommand('copy');
// 가상으로 붙여주었던 input 태그를 제거해줍니다.
document.getElementById("textDiv").removeChild(createInput);
alert('복사가 완료되었습니다.');
});
</script>
</body>흔히 복사 기능을 넣는다면 볼수 있는 코드. 출처(m.blog.naver.com/opgj123/221511874378)
하지만 이것으로 할 경우 작동이 될때가 있고, 아닐때가 있어서 애를 먹었다.
그 이유가 보통 innerText가 있는데, value로 표기하여 못건드리게 하거나 할때가 있다.
하지만, 여기에 있다고 아무생각 없이 쓰는 사람들이 있을 수 도 있다.
그럴땐
console.log(text);찍어보자.
속성값이 죄다 들어오니 innerText가 들어오거나 다른 속성 value로 들어온다거나 할 것이다.
그런 해당 값으로 읽을 수 있게 찍어 줘야한다.
그리고 나의 경우에는 input 창에 있는 value 값을 복사해와야 하므로
해당 코드는 가상으로 input을 만드므로 나에겐 좀 문제가 있는 코드였다.
제작자가 적은 코드도 input이 있는데 굳이 만들 필요는 없다했으니까
아마도 input 중복때문에 작동이 되었다가 말았다가 하는 듯 싶었다.
그리하여, 이를 개선하고자 한다.
$('#modalclick').click(()=> {
$('#add-text').attr('type','text') // 인풋의 type ='hidden'을 text로 변경한다.
$('#add-text').select(); // 해당 입력값 선택
let success = document.execCommand('copy'); // 해당값을 복사하여 success에 할당.
$('#add-text').attr('type','hidden') //text을 hidden로 변경한다.
if(success) {
alert('복사가 완료되었습니다.');
} else {
alert('복사 실패');
};
});집에와서 긴가민가한 상태로 코드를 기억하며 다시 쳤는데, 아마도 이게 맞을거다.
아니면 다시 고치고 ㅎㅎㅎ
input때문에 다시 만든 코드였다.
++ 타입분을 내가 제대로 안적어놔서 코드 수정. 끝.++
코드 참고 출처
728x90
'취업 > PHP' 카테고리의 다른 글
| php코드 자바스크립트를 통한 실시간 시간 바꾸기 (0) | 2021.04.29 |
|---|---|
| php 텔레그램 텔봇 만들기(feat.유투브 10분만에 텔레그램 봇 만들기) (0) | 2021.04.29 |
| 서버 에러알림 SMS를 텔레그램봇을 이용한 알림연동으로 교체하기. (0) | 2021.04.29 |
| [php]자바스크립트 "qr코드 만들기" (0) | 2021.04.21 |
| [PHP] 작동방식 (0) | 2021.03.08 |