使用jQuery和ClipboardJS库在网頁實現點击内容将文本復制到剪贴板_编程

使用jQuery和ClipboardJS库在网頁實現點击内容将文本復制到剪贴板

finchui 2024-01-15 00:05:39 10018

jQuery库大家并不陌生，指的是网頁中引用的jquery.js文件。

而ClipboardJS库很多開發者却是第一次聽說，它指的是网頁引用的clipboard.js文件。

在引用clipboard.js文件之前，應该先引用jquery.js文件。

例如：

<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>

clipboard官网對它的介绍是：

将文本復制到剪贴板應该不難。它不需要几十個步骤來配置，也不需要数百個KB來加載。但最重要的是，它不應该依赖于Flash或任何臃肿的框架。

這就是clipboard.js存在的原因。

這也是我選择clipboard.js的原因。

那麼，在實際應用中，代码應该怎麼寫呢？

例如，我們在解決以下問题：

點击dl標簽，復制dl標簽子元素中input的值，復制成功後并提示已復制，而已復制的提示文字在2秒後恢復初始内容。

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>

js代码（放在引用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('已复制');
    setTimeout(function() {
      spanElement.text(originalText); // 还原<span>元素的内容
    }, 2000); // 2秒后还原内容
  });

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

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