介绍//html部分
& lt; input 类型=皌ext", id=癱opyValue",/比;
& lt; button 类型=癰utton", data-clipboard-target=& # 39; # copyValue& # 39;在复制& lt;/button>//js部分
var clipboard =, new 剪贴板(& # 39;按钮# 39;);
clipboard.on(& # 39;成功# 39;,函数(e) {
,e.clearSelection ();
,警报(& # 39;复制成功& # 39;);
,});
clipboard.on(& # 39;错误# 39;,函数(e) {
,e.clearSelection ();
,警报(& # 39;复制失败& # 39;);
以前,}); //HTML部分
& lt; button 类型=癰utton", data-clipboard-text=& # 39;复制内容& # 39;在复制& lt;/button>//js部分
new 剪贴板(& # 39;按钮# 39;); //html部分
,& lt; input 类型=皌ext", id=癱opyValue",/比;
,& lt; button 类型=癰utton", id=癱opy"在复制& lt;/button>//js
$(& # 39;#复制# 39;)。(& # 39;点击# 39;,,function (), {
美元,var value =, (& # 39; # copyValue& # 39;) .val ();
,$(& # 39;#复制# 39;).attr (& # 39; data-clipboard-text& # 39;,,值);
,var clipboard =, new 剪贴板(& # 39;#复制# 39;);
,clipboard.on(& # 39;成功# 39;,,function (e), {
,警报(& # 39;复制成功& # 39;);
,});
,clipboard.on(& # 39;错误# 39;,,function (e), {
,警报(& # 39;复制失败& # 39;);
,});
}) & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> function-target</title>
& lt;才能meta name=皏iewport",内容=翱矶?设备宽度,初始=1,比;
& lt;/head>
& lt; body>
& lt;才能!,1只Define some markup ——比;
& lt;才能button 类=癰tn"祝辞Copy
& lt;才能div> hello</div>
& lt;才能!——,2只Include library ——比;
& lt;才能https://www.yisu.com/zixun/script src=" . ./dist/clipboard.min.js ">
<>脚本
剪贴板var=new ClipboardJS (”。btn’, {
目标:函数(){
返回document.querySelector (div);
｝
});
剪贴板。(“成功”,函数(e) {//console.log (e);
alert('复制成功!”)
});
剪贴板。(“错误”,函数(e) {
console.log (e);
});>
今天就跟大家聊聊有关使用剪贴板。js怎么实现一个复制功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>第一种
说明:如果我们使用按钮复制的是另一个元素的内容,则我们可以使用这种方法。此时将按钮称为触发元素,被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器,而data-clipboard-target的属性被设置在触发元素格式上剪贴板()为实例化对象,参数可以是HTML元素,元素选择器。有成功和错误两个事件可以供我们监听,实现自己的逻辑。因为复制完成后,目标元素会处于选中状态,所以我们需要e.clearSelection()取消目标元素的选中状态。
优点:复制的内容可以是动态的,目标元素的值发生变化,复制的值也发生变化。
适用场景:复制内容可变,不固定。
<强>第二种
说明:data-clipboard-text的值为你要复制的内容。无目标元素,只有触发元素。
缺点:复制的内容是静态的,不变的,提前设置好的。
适用场景:复制内容固定不变
对于以上缺点,我们可以优化如下,使之复制的内容也是动态的。
<>强接着这里晒出最常用的几种方式,以供不时之需。
function-target