텍스트를 클립보드에 복사하는 방법

텍스트를 클립보드에 복사하는 것은 최신 웹 애플리케이션의 일반적인 요구 사항입니다. 많은 바닐라 JavaScript 솔루션이 존재하지만 오늘은 경량 라이브러리인 Clipboard.js와 간단한 툴팁 라이브러리인 Hint.css를 사용하여 우아한 복사 대상 솔루션을 만들어 보겠습니다. 클립보드 기능.

---

1단계: HTML 구조

HTML은 동일하게 유지됩니다. 여기에는 복사 아이콘 위로 마우스를 가져갈 때 도구 설명을 표시하는 Hint.css 스타일의 링크가 포함되어 있습니다.

<a href="#">



<ul>
<li>
<strong>class="hint hint-bottom"</strong> : Adds a bottom-aligned tooltip using Hint.css.</li>
<li>
<strong>data-hint="Copy link to clipboard"</strong> : The tooltip text.</li>
</ul>


<hr>

<h3>
  
  
  Step 2: JavaScript
</h3>

<p>Here’s the updated code in plain JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">// Select the clipboard control
const control = document.querySelector('.app-clipboard-link');

// Set the clipboard text
control.setAttribute('data-clipboard-text', 'https://google.com');

// Initialize Clipboard.js
const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

// Handle the success event
clipboard.on('success', (event) => {
    // Update the tooltip to show "Copied"
    control.setAttribute('data-hint', 'Copied');

    // Reset the tooltip after 3 seconds
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

---

2254개 무료 리소스 개발자를 위한!! ❤️ ?? _{(매일 업데이트)}

1400개의 무료 HTML 템플릿

372개의 무료 뉴스 기사

72가지 무료 AI 프롬프트

333개의 무료 코드 라이브러리

Node, Nuxt, Vue 등을 위한 52개의 무료 코드 조각 및 상용구!

25개의 무료 오픈 소스 아이콘 라이브러리

dailysandbox.pro를 방문하여 보물 창고에 무료로 액세스하세요!

---

코드 설명

• 이렇게 하면 data-clipboard-text 속성이 원하는 URL로 동적으로 설정됩니다.
• 텍스트: 클릭한 요소에 대한 data-clipboard-text 속성 값을 반환하는 콜백 함수를 정의합니다.
• 클립보드 작업이 성공하면 툴팁을 "복사됨"으로 업데이트합니다.
• 3초 후에 툴팁 텍스트를 다시 "클립보드에 링크 복사"로 재설정합니다.

성공 이벤트 처리 :

clipboard.on('success', (event) => {
    control.setAttribute('data-hint', 'Copied');
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

Clipboard.js 초기화 :

const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

클립보드 텍스트 설정 :

control.setAttribute('data-clipboard-text', 'https://google.com');

---

이 접근 방식의 장점

1. jQuery 종속성 없음 : 일반 JavaScript를 사용하여 솔루션이 가볍고 최신 웹 표준과 호환됩니다.
2. Hint.css 통합 : 추가 JavaScript 없이 깔끔하고 시각적으로 매력적인 툴팁을 제공합니다.
3. Clipboard.js 단순성 : 맞춤 로직 없이도 클립보드 상호 작용을 효율적으로 처리합니다.

---

결론

단 몇 줄의 일반 JavaScript와 Clipboard.js 및 Hint.css의 강력한 기능을 사용하여 깔끔하고 사용자 친화적인 클립보드로 복사 기능을 구현했습니다. 이 접근 방식은 기능과 우아함을 유지하면서 불필요한 종속성을 방지합니다.

이제 직접 시험해 보세요! 사용자는 이 기능의 단순성과 응답성을 높이 평가할 것입니다. ?

웹 개발에 대한 더 많은 팁을 보려면 DailySandbox를 확인하고 무료 뉴스레터에 가입하여 앞서 나가세요!

위 내용은 텍스트를 클립보드에 복사하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!