웹 페이지에서 jQuery 및 Clipboard JS 라이브러리를 사용하여 클립보드에 텍스트 복사 클릭 콘텐츠 구현

jQuery라이브러리는 웹 페이지에서 참조되는 jquery. js 파일을 참조하는 것에 익숙하지 않습니다.

Clipboard JS 라이브러리는 많은 개발자가 처음 들었으며 웹 페이지에서 참조되는 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 가 필요하지 않습니다.그러나 가장 중요한 것은 플래시 또는 팽창 된 프레임워크에 의존해서는 안된다는 것입니다.

이것이 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 코드 (c lip board . 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 는 다양한 브라우저 호환성을 가지고 있다는 것을 언급 할 가치가 있습니다.