Menggunakan jQuery dan Clipboard JS Library untuk mengimplementasikan konten klik di halaman web untuk menyalin teks ke clipboard

jQueryPerpustakaan tidak asing bagi Anda, mengacu pada file jquery.js yang direferensikan di halaman web.

Clipboard JS Library adalah yang pertama kali didengar oleh banyak pengembang. Ini mengacu pada file clipboard.js yang direferensikan oleh halaman web.

Sebelum Anda mengacu pada file clipboard.js, Anda harus mengacu pada file jquery.js terlebih dahulu.

Sebagai contoh:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Situs web resmi clipboard adalah:

Menyalin teks ke clipboard seharusnya tidak sulit. Ini tidak memerlukan puluhan langkah untuk dikonfigurasi, dan tidak memerlukan ratusan KB untuk dimuat. Tetapi yang paling penting, tidak boleh bergantung pada Flash atau kerangka kerja yang membengkak.

Itulah alasan mengapa Clipboard.js ada.

Itulah sebabnya saya memilih Clipboard.js.

Jadi, dalam aplikasi praktis, bagaimana kode harus ditulis? Bagaimana kode harus ditulis? Bagaimana kode harus ditulis?

Sebagai contoh, kami sedang menyelesaikan masalah-masalah berikut: Kami sedang menyelesaikan masalah-masalah berikut:

Klik label dl untuk menyalin nilai input dalam sub-elemen label dl. Setelah menyalin berhasil, teks prompt yang disalin akan dipulihkan setelah 2 detik.

Kode HTML

<ul class="list-down">
    <li class="BDown">
        <dl>
            <a href="#" title="百度网盘" rel="nofollow">
                <dt>百度网盘</dt>
            </a>
        </dl>
        <dl>
            <span>提取密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="dfd3"></dt>
        </dl>
        <dl>
            <span>解压密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="dgh4"></dt>
        </dl>
    </li>
    <li class="FDown">
        <dl>
            <a href="#" title="阿里云盘" rel="nofollow">
                <dt>阿里云盘</dt>
            </a>
        </dl>
        <dl>
            <span>提取密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="df3g"></dt>
        </dl>
        <dl>
            <span>解压密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="g6d4"></dt>
        </dl>
    </li>
    <li class="KDown">
        <dl>
            <a href="#" title="夸克网盘" rel="nofollow">
                <dt>夸克网盘</dt>
            </a>
        </dl>
        <dl>
            <span>提取密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="df6h"></dt>
        </dl>
        <dl>
            <span>解压密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="3g46"></dt>
        </dl>
    </li>
    <li class="FDown">
        <dl>
            <a href="#" title="迅雷云盘" rel="nofollow">
                <dt>迅雷云盘</dt>
            </a>
        </dl>
        <dl>
            <span>提取密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="4h67"></dt>
        </dl>
        <dl>
            <span>解压密码</span>
            <dt><input id="hn_Email" type="text" name="Email" value="3g46"></dt>
        </dl>
    </li>
</ul>

Kode js (ditempatkan di belakang referensi clipboard.js)

$(document).ready(function() {
  // 初始化ClipboardJS并选择要复制值的元素
  var clipboard = new ClipboardJS('.list-down dl', {
    // 获取要复制的文本
    text: function(trigger) {
      return $(trigger).find('input').val();
    }
  });

  // 处理<dl>元素的点击事件
  $('.list-down dl').on('click', function(e) {
    e.preventDefault(); // 阻止原生事件
    var spanElement = $(this).find('span');
    var originalText = spanElement.text();
    spanElement.text("'Diperproduksi' 'Diperproduksi' 'Diperproduksi'");
    setTimeout(function() {
      spanElement.text(originalText); // 还原<span>元素的内容
    }, 2000); // 2秒后还原内容
  });

  // 处理剪贴板成功事件
  clipboard.on('success', function(e) {
    console.log('复制成功!');
    e.clearSelection(); // 清除选中状态
  });

  // 处理剪贴板错误事件
  clipboard.on('error', function(e) {
    console.log('复制失败!');
  });
});

Efek tampilan depan

Terakhir, perlu disebutkan bahwa kompatibilitas browser yang berbeda dari clipboard.js baik-baik saja.