如何使用带有动态内容和触发器的剪贴板.js进行复制
How to copy using clipboard.js with dynamic content and triggers
点击.fw-code-copy-button
后,我想从最近的容器中复制源代码。.fw-code-copy-button
-s是动态创建的,在用户点击专用的"查看源代码"按钮后。
Html,例如按钮:
<span class="fw-code-copy">
<span class="fw-code-copy-button" data-clipboard-text="...">copy</span>
</span>
这就是我触发点击事件的方式,并定义要复制到剪贴板的源代码:
$(document).on("click", ".fw-code-copy-button", function(){
var source = $(this).closest(".fw-code-copy").next("code").text();
});
这就是clipboard.js如何触发它的复制事件
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return source; // source should somehow be copied from scope above it
}
});
每当我点击网站上的任何地方,都会出现以下错误:
Uncaught Error: Missing required attributes, use either "target" or "text"
但首先我不想定义要在data-clipboard-text="..."
中复制的文本然后以CCD_ 5作为其值来定义CCD_。
如果有人愿意支付一秒钟,我将非常感激。
[edit]我已经编写了jsFiddle进行演示,令人惊讶的是UncaughtError消失了,但我仍然需要将source
代码从onClick范围移动到剪贴板范围。
https://jsfiddle.net/2rjbtg0c/1/
根据您的原始代码:
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).closest(".fw-code-copy").next("code").text();
}
});
触发器是您单击的按钮。获取父级,然后返回代码块内的文本。您还需要修剪任何前导和尾随空白。
Demo
这将抓取代码块中的文本,如您所包含的示例中所示
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).parent().find('code').first().text().trim();
}
});
.fw-code-copy {
display: block;
position: relative;
width: 400px;
height: 30px;
background: #FFE;
border: thin solid #FF0;
margin-bottom: 0.5em;
padding: 0.5em;
}
.fw-code-copy-button {
position: absolute;
top: 8px;
right: 8px;
padding: 0.25em;
border: thin solid #777;
background: #800080;
color: #FFF;
}
.fw-code-copy-button:hover {
border: thin solid #DDD;
background: #992699;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-1.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-2.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-3.css"></code>
</span>
相关文章:
- 如何在Firefox中获取剪贴板文本和html当用户按下“;Ctrl+V”;
- 零剪贴板复制文本后切换页面
- 复制到剪贴板在safari-angularjs中不起作用
- 使用javascript代码将HTML元素复制到剪贴板
- “复制到剪贴板”不起作用
- 如何使用剪贴板.js
- 如何在Ajax中使用剪贴板.js?(数据剪贴板)
- 使用Zclipboard复制到剪贴板.js不起作用
- 如何使用ZeroClipboard.js在页面加载时将静态单词复制到剪贴板
- zClip don't工作-多次复制到剪贴板JS
- 可以't得到“;剪贴板.js”;工作
- 如何编辑此代码HTML/CSS以使'选择'JS代码也复制2剪贴板
- 如何使用带有动态内容和触发器的剪贴板.js进行复制
- 跨浏览器JS/jQuery将当前URL复制到剪贴板
- Sketch.js将画布复制到剪贴板
- 自定义选择功能,复制到剪贴板纯JS
- 剪贴板和拖放文件加载器(HTML + JS)
- 为什么在JS中写入剪贴板被认为是一个安全漏洞
- 如何将链接复制到剪贴板,以便在wysiwyg编辑器(JS,jQuery)中使用
- React 组件中的剪贴板.js错误