Cara Menyalin Teks ke Papan Klip

Menyalin teks ke papan keratan ialah keperluan biasa dalam aplikasi web moden. Walaupun banyak penyelesaian JavaScript vanila wujud, hari ini kami akan menggunakan Clipboard.js , perpustakaan ringan dan Hint.css , perpustakaan petua alat ringkas, untuk mencipta salinan ke- yang elegan ciri papan keratan.

Langkah 1: Struktur HTML

HTML tetap sama. Ia termasuk pautan yang digayakan dengan Hint.css untuk menunjukkan petua alat apabila menuding pada ikon salin.

<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 PERCUMA SUMBER UNTUK PEMAJU!! ❤️ ?? _{(dikemas kini setiap hari)}

1400 Templat HTML Percuma

372 Artikel Berita Percuma

72 Gesaan AI Percuma

333 Perpustakaan Kod Percuma

52 Coretan Kod & Plat Dandang untuk Nod, Nuxt, Vue dan banyak lagi!

25 Perpustakaan Ikon Sumber Terbuka Percuma

Lawati dailysandbox.pro untuk akses percuma kepada harta karun sumber!

Penjelasan Kod

• Ini menetapkan atribut data-clipboard-text secara dinamik kepada URL yang diingini.
• teks: Mentakrifkan fungsi panggil balik yang mengembalikan nilai atribut data-clipboard-text untuk elemen yang diklik.
• Mengemas kini petua alat kepada "Disalin" apabila tindakan papan keratan berjaya.
• Menetapkan semula teks petua alat kepada "Salin pautan ke papan keratan" selepas 3 saat.

Mengendalikan Acara Kejayaan :

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

Memulakan Clipboard.js :

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

Menetapkan Teks Papan Klip :

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

Kelebihan Pendekatan Ini

1. Tiada Ketergantungan jQuery : Dengan menggunakan JavaScript biasa, penyelesaiannya ringan dan serasi dengan piawaian web moden.
2. Integrasi Hint.css : Menyediakan petua alat yang bersih dan menarik secara visual tanpa JavaScript tambahan.
3. Clipboard.js Simplicity : Mengendalikan interaksi papan keratan dengan cekap tanpa memerlukan logik tersuai.

Kesimpulan

Dengan hanya beberapa baris JavaScript biasa dan kuasa Clipboard.js dan Hint.css, anda telah melaksanakan ciri salin ke papan keratan yang bersih dan mesra pengguna. Pendekatan ini mengelakkan pergantungan yang tidak perlu sambil mengekalkan kefungsian dan keanggunan.

Sekarang, teruskan dan cuba! Pengguna anda akan menghargai kesederhanaan dan responsif ciri ini. ?

Untuk mendapatkan lebih banyak petua tentang pembangunan web, lihat DailySandbox dan daftar untuk surat berita percuma kami untuk kekal di hadapan!

Atas ialah kandungan terperinci Cara Menyalin Teks ke Papan Klip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!