자바스크립트 텍스트 복사하기 버튼 만들기

계좌번호를 넣는 Ul를 만들다가 복사하기버튼이 있고 계좌번호가 복사되게 한다면 더 편리할 것 같다는 생각들어 클립보드에 복사하는 버튼을 만들어봤습니다. 

 

먼저 클립보드에 복사하는 기능이 한개만 필요한 경우와 여러개 필요한 경우로 나눠서 제작했습니다. 처음에는 한개만 했더니, 여러개 일땐 반복해서 써야 하는 문제점이 있어 나눠봤어요.

 

특징.

1. 클립보드에 복사하기 1개만 필요할 경우

2. input태그를 이용해 복사하기 원하는 내용 넣기

 

HTML

  <p class="box01">
        <input id="myInput" value="1번 텍스트 복사하기" readonly>
        <button onclick="copy_to_clipboard()"><img src="https://blog.kakaocdn.net/dn/N1wUc/btqIl7XZtKM/b44qX9Six1vczz2ISWj4LK/img.png" alt="복사하기">
        </button>
    </p>       

- input의 value값에 복사하기 원하는 텍스트 삽입

- input이 아니라 그냥 텍스트처럼 보이기 위해 readonly 속성을 주고, css로 테두리 삭제

- 이미지 출처는 내가 만듦

- button클릭시 스크립트가 작동하도록 onclick속성을 넣어줌

 

CSS

       .box01{
            text-align: center;
        }
        .box01 input{
            border: none;
            font-size: 15px;
            outline: none;
            text-align: center;
        }
        .box01 button{
            border:none;
            width:60px;
            max-width: 100px;
            vertical-align: bottom;
        }
        .box01 button img{
            width: 100%;
        }

- border와 outline 을 없게 해서 input태그를 텍스트처럼 보이게 함
- button의 vertical-align:bottom으로 이미지와 텍스트이 높이를 맞춤

 

JAVASCRIPT

function copy_to_clipboard() {    
  var copyText = document.getElementById('myInput');
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("Copy");
  alert('복사되었습니다, 감사합니다.');
}

- 버튼 클릭시, input 태그를 선택되도록하고, 복사 후 alert창이 뜨도록 함

 

결과물

---

특징

01. 클립보드의 복사하기 기능이 여러개 필요한 경우

02. 클릭된 요소 기준으로 input를 찾아 가지고오도록 함

 

HTML

<p class="box01">
    <input value="1번 텍스트 복사하기" readonly><button onclick="copy_to_clipboard(event)"><img src="https://blog.kakaocdn.net/dn/N1wUc/btqIl7XZtKM/b44qX9Six1vczz2ISWj4LK/img.png" alt="복사하기">
    </button>
</p>       
<p class="box01">
    <input value="2번 텍스트 복사하기" readonly><button onclick="copy_to_clipboard(event)"><img src="https://blog.kakaocdn.net/dn/N1wUc/btqIl7XZtKM/b44qX9Six1vczz2ISWj4LK/img.png" alt="복사하기">
    </button>
</p>       

- 똑같은 유형의 HTML 모듈(?) 2개 만들기

 

CSS

       .box01{
            text-align: center;
        }
        .box01 input{
            border: none;
            font-size: 15px;
            outline: none;
            text-align: center;
        }
        .box01 button{
            border:none;
            width:60px;
            max-width: 100px;
            vertical-align: bottom;
        }
        .box01 button img{
            width: 100%;
        }

JAVASCRIPT

function copy_to_clipboard(event) {    
  var copyText = event.target.parentNode.previousElementSibling;
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("Copy");
  alert('복사되었습니다, 감사합니다.');
}     

- 클릭된 img의 부모의 형제인 input를 담고, 복사함

결과물