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('复制失败!');
});
});前面表示効果
最後に、clipboard.jsの異なるブラウザ間の互換性は良好です。
