Verwenden Sie jQuery und ClipboardJS-Bibliotheken, um Klick-Inhalte auf Webseiten zu implementieren, um Text in die Zwischenablage zu kopieren

jQueryDie Bibliothek ist nicht unbekannt und bezieht sich auf die jquery.js-Dateien, die auf Webseiten verwiesen werden.

Die ClipboardJS-Bibliothek ist für viele Entwickler erstmals bekannt und bezieht sich auf die Clipboard.js-Datei, die von Webseiten verwiesen wird.

Bevor Sie auf die Clipboard.js-Dateien verweisen, sollten Sie auf die jquery.js-Dateien verweisen.

Zum Beispiel:

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

Die offizielle Seite von Clipboard lautet:

Das Kopieren von Text in die Zwischentafel sollte nicht schwierig sein. Es benötigt keine Dutzende von Schritten zur Konfiguration, und es benötigt keine Hunderte von KB zum Laden. Aber vor allem sollte es nicht auf Flash oder irgendwelche aufgeblähten Frameworks angewiesen sein.

Das ist der Grund, warum es Clipboard.js gibt.

Deshalb habe ich mich für Clipboard.js entschieden.

Wie sollte der Code in der Praxis geschrieben werden?

Wir lösen beispielsweise folgende Probleme:

Klicken Sie auf das DL-Tag, kopieren Sie den Wert der Eingabe in dem DL-Tag - Unterelement, nachdem die Kopie erfolgreich ist und die Aufforderung kopiert wurde, und der kopierte Aufforderung Text wird nach 2 Sekunden den ursprünglichen Inhalt wiederherstellen.

Der HTML-Code

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

Der js-Code (hinter dem Referenz 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("\"Kopiert\"");
    setTimeout(function() {
      spanElement.text(originalText); // 还原<span>元素的内容
    }, 2000); // 2秒后还原内容
  });

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

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

Frontend zeigt Effekt

Schließlich ist es erwähnenswert, dass die verschiedenen Browser-Kompatibilität von clipboard.js gut ist.