목차
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>
결과보기
주소 복사
랜덤 이동