Sử dụng thư viện jQuery và ClipboardJS để thực hiện nội dung nhấp vào các trang web để sao chép văn bản vào bảng tạm

jQueryThư viện không xa lạ với tất cả mọi người, đề cập đến các tệp jquery.js được tham chiếu trong các trang web.

Lần đầu tiên mà nhiều nhà phát triển nghe thấy thư viện ClipboardJS, nó đề cập đến các tập tin clipboard.js được tham chiếu bởi các trang web.

Trước khi tham chiếu tập tin clipboard.js, bạn nên tham chiếu tập tin jquery.js.

Ví dụ:

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

Trang web chính thức của clipboard là:

Sao chép văn bản vào bảng tạm không nên khó khăn. Nó không cần hàng chục bước để cấu hình, cũng không cần hàng trăm KB để tải. Nhưng quan trọng nhất, nó không nên phụ thuộc vào Flash hoặc bất kỳ khung phồng lên nào.

Đó là lý do tại sao clipboard.js tồn tại.

Đó là lý do tại sao tôi chọn clipboard.js.

Trong thực tế, code nên được viết như thế nào?

Ví dụ, chúng tôi đang giải quyết các vấn đề sau:

Nhấp vào thẻ dl, sao chép giá trị input trong phần tử con của thẻ dl, sau khi sao chép thành công và nhắc nhở đã được sao chép, và văn bản nhắc nhở đã được sao chép sẽ khôi phục lại nội dung ban đầu sau 2 giây.

mã html mã

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

Mã js (được đặt sau tham chiếu 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("'được sao chép'");
    setTimeout(function() {
      spanElement.text(originalText); // 还原<span>元素的内容
    }, 2000); // 2秒后还原内容
  });

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

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

Hiển thị hiệu ứng phía trước

Cuối cùng, cần lưu ý rằng clipboard.js có khả năng tương thích với các trình duyệt khác nhau.