如何使用 clipboard.js 复制动态内容和触发器
How to copy using clipboard.js with dynamic content and triggers
点击 .fw-code-copy-button
后,我想从最近的容器中复制源代码。
.fw-code-copy-button
-s 是动态创建的,在用户单击专用 "view source" 按钮后。
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="..."
中定义要复制的文本
其次 data-clipboard-text
定义为 "..."
作为它的值。
如果有人愿意付钱,我将不胜感激。
[edit] 我已经编写了用于演示的 jsFiddle,令人惊讶的是 UncaughtError 消失了,但我仍然需要将 source
代码从 onClick 移动到剪贴板范围。
触发器是您单击的按钮。获取父级,然后 return 代码块内的文本。您还需要 trim 任何前导和尾随白色-space.
演示
这会抓取代码块内的文本,如您所包含的示例
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>
根据你原来的代码:
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).closest(".fw-code-copy").next("code").text();
}
});
点击 .fw-code-copy-button
后,我想从最近的容器中复制源代码。
.fw-code-copy-button
-s 是动态创建的,在用户单击专用 "view source" 按钮后。
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="..."
中定义要复制的文本
其次 data-clipboard-text
定义为 "..."
作为它的值。
如果有人愿意付钱,我将不胜感激。
[edit] 我已经编写了用于演示的 jsFiddle,令人惊讶的是 UncaughtError 消失了,但我仍然需要将 source
代码从 onClick 移动到剪贴板范围。
触发器是您单击的按钮。获取父级,然后 return 代码块内的文本。您还需要 trim 任何前导和尾随白色-space.
演示
这会抓取代码块内的文本,如您所包含的示例
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>
根据你原来的代码:
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).closest(".fw-code-copy").next("code").text();
}
});