[Window_Navigator] JS - clipboard 속성 - 클립보드에 문자열 복사해 넣기 (= clipboard속성 = 클립보드속성) ※ 주소복사 / 문자열복사

목차

1. clipboard 예제 - 주소복사
2. clipboard 정의
3. clipboard 메서드
4. 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() 메서드
• readText() 메서드
• write() 메서드
• writeText() 메서드

---

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>

 

결과보기