jQueryA biblioteca não é estranha para todos, e refere-se ao arquivo jquery.js que é citado em páginas da Web.
A biblioteca ClipboardJS é a primeira vez que muitos desenvolvedores ouvem falar sobre ela. Ela se refere ao arquivo clipboard.js referenciado por páginas da Web.
Antes de referenciar o arquivo clipboard.js, você deve referenciar o arquivo jquery.js.
Por exemplo, o
<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>O site oficial do clipboard para sua introdução é:
Não deve ser difícil copiar o texto para o porta-papeles. Ele não requer dezenas de passos para ser configurado, nem centenas de KB para ser carregado. Mas, acima de tudo, não deve depender do Flash ou de qualquer estrutura inchada.
É por isso que existe o clipboard.js.
É por isso que escolhi o clipboard.js.
Então, em uma aplicação prática, como o código deve ser escrito?
Por exemplo, estamos abordando os seguintes problemas:
Clique na etiqueta dl para copiar o valor de entrada no subelemento da etiqueta dl. Após a cópia bem-sucedida, o texto de prompt copiado será solicitado e o conteúdo original será restaurado após 2 segundos.
Código 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>Código js (colocado atrás da referência 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("'Copiado'");
setTimeout(function() {
spanElement.text(originalText); // 还原<span>元素的内容
}, 2000); // 2秒后还原内容
});
// 处理剪贴板成功事件
clipboard.on('success', function(e) {
console.log('复制成功!');
e.clearSelection(); // 清除选中状态
});
// 处理剪贴板错误事件
clipboard.on('error', function(e) {
console.log('复制失败!');
});
});Display front-end
Finalmente, vale a pena mencionar que a compatibilidade com diferentes navegadores do clipboard.js é boa.
Comentários dos internautas