목차
- clipboard 예제 - 주소복사
- clipboard 정의
- clipboard 메서드
- clipboard 예제 - 복사된 문자열을 툴팁에 표시
clipboard 예제 - 주소복사
<button type="button" style="cursor:pointer" onclick="urlCopy()">주소복사</button>
<script>
function urlCopy() {
navigator.clipboard.writeText(location.href).then(() => { alert("주소 복사 완료"); } );
}
</script>
결과보기
비타주리 님 (230121) https://sir.kr/g5_tip/19820
clipboard 정의
클립보드에 문자열 복사해 넣기.
1.
- clipboard : 데이터 '저장/전송' 위해 단기간만 사용하는 데이터 버퍼.
- clipboard는 navigator 객체에 속하는 객체 속성임.
2. 클립보드 기능
- 시스템 클립보드에 '텍스트/데이트'를 쓰기.
- 시스템 클립보드로부터 '텍스트/데이터' 읽기.
3. MDN clipboard 매뉴얼
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
clipboard 메서드
목차
read() 메서드
클립보드에서 텍스트 외 데이터 읽기
- 클립보드에서 임의의 데이터(예: 이미지)를 요청하고 클립보드의 내용을 포함하는 ClipboardItem 객체 배열로 해결되는 Promise 반환.
readText() 메서드
클립보드에서 텍스트 읽기
- 시스템 클립보드에서 텍스트를 요청. 사용 가능해지면 클립보드의 텍스트를 포함하는 문자열로 확인되는 Promise 반환.
write() 메서드
클립보드에 텍스트 이외 데이터 쓰기
- 시스템 클립보드에 임의의 데이터를 씀. 이 비동기 작업은 반환된 Promise 풀어 완료됨을 알림.
writeText() 메서드
클립보드에 텍스트 쓰기
- 시스템 클립보드에 텍스트 쓰고 텍스트가 클립보드에 완전히 복사되면 해결되는 Promise 반환.
clipboard 예제 - 복사된 문자열을 툴팁에 표시
<style>
.btnbox {
position: relative;
display: inline-block;
}
.btnbox .tooltip {
visibility: hidden;
width: 250px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.btnbox .tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.btnbox:hover .tooltip {
visibility: visible;
opacity: 1;
}
</style>
<input type="text" value="홈짱닷컴 Homzzang.com" id="hz">
<div class="btnbox">
<button onclick="copyText()" onmouseout="basicState()">
<span class="tooltip" id="tooltip">클립보드에 복사</span>
복사하기
</button>
</div>
<script>
function copyText() {
var hz = document.getElementById("hz");
hz.select();
hz.setSelectionRange(0, 99999);
navigator.clipboard.writeText(hz.value);
var tooltip = document.getElementById("tooltip");
tooltip.innerHTML = "복사완료: " + hz.value;
}
function basicState() {
var tooltip = document.getElementById("tooltip");
tooltip.innerHTML = "클립보드에 복사";
}
</script>
결과보기