Использование библиотеки jQuery и ClipboardJS для копирования текста в буфер обмена на веб-странице

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 рассказывает о нем:

Копирование текста в буфер обмена не должно быть сложным.Он не требует десятков шагов для настройки и не требует сотен КБ для загрузки.Но самое главное, он не должен зависеть от Flash или какой-либо надутой фреймворки.

Именно поэтому существует Clipboard.js.

Именно поэтому я выбрал Clipboard.js.

Итак, как должен быть написан код в практическом применении?

Например, мы занимаемся следующими вопросами:

Нажмите на тег dl, скопируйте значение input в подэлементе тега dl, после успешной копирования будет сообщено о скопировании, а скопированный текст запроса восстановит исходный контент через 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('复制失败!');
  });
});

Эффект отображения передней части

Наконец, стоит отметить, что clipboard.js хорошо совместим с различными браузерами.