본문으로 건너뛰기

Copy

MSK Copy는 클립보드 복사 버튼 primitive입니다. 텍스트 또는 대상 요소의 내용을 복사하고 잠시 "복사됨" 피드백을 표시합니다.

Preview

hello world

Data API

<button type="button" data-msk-copy data-msk-copy-text="hello world">
<span data-msk-copy-label>복사</span>
</button>

<button type="button" data-msk-copy data-msk-copy-target="#token" data-msk-copy-done="복사됨!">
복사
</button>

JavaScript API

window.MSK.ui.copy.copy(button);

Events

button.addEventListener('msk:copy', (event) => console.log(event.detail.text));
button.addEventListener('msk:copy-error', () => {});

Accessibility / 동작

  • navigator.clipboard 우선, 미지원 환경은 execCommand('copy') fallback.
  • 복사 후 data-msk-copy-done 라벨을 data-msk-copy-duration(기본 1500ms) 동안 표시.
  • data-msk-copy-label 자식이 있으면 그 텍스트만 교체하고, 없으면 버튼 텍스트를 교체.