当前代码附加了一个按钮来快速选择<pre>
中的一些代码。标签。我想要添加的是将该内容复制到剪贴板并将按钮文本更改为“已复制”的功能。
如何通过修改下面的当前工作代码来实现它?我不介意使用 clipboard.js、jQuery 位或仅自 Chrome 43 以来引入的原生 JS 支持。我只是不知道如何从这里继续添加我需要的东西。
function selectPre(e) {
if (window.getSelection) {
var s = window.getSelection();
if (s.setBaseAndExtent) {
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
else {
var r = document.createRange();
r.setStart(e.firstChild, 0);
r.setEnd(e.lastChild, e.lastChild.textContent.length);
s.removeAllRanges();
s.addRange(r);
}
}
else if (document.getSelection) {
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
else if (document.selection) {
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}
var diff = document.getElementById('diff_table').getElementsByTagName('tr');
var difflen = diff.length;
for(i=0; i<difflen; i++) {
var newdiff = diff[i].childNodes[1];
if (newdiff.className && (newdiff.className == 'added' || newdiff.className == 'modified')) {
newdiff.className += ' diff-select';
newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs" onclick="selectPre(this.parentNode.nextSibling)">Select</button></div>' + newdiff.innerHTML;
}
}
最佳答案
出于某种原因确实是你的 selectPre
在 jsfiddle 上重现案例时找不到函数。 Jsfiddle 可能会摆脱它认为是死代码的东西,或者为了缩小而重命名它。
但是如果它所做的是选择 <pre>
的内容标记,clipboard.js库(您已准备好使用)已经可以自行完成。
因此,您最终需要正确配置剪贴板对象。使用那个:
new Clipboard('.btn', {
// The targeting to the correct content is done here.
target: function(trigger) {
return trigger.parentNode.nextSibling;
}
// clipboard.js will take the entire inner content of the <pre>,
// I think this is what you are trying to do in your "selectPre"
// function, but I am not sure.
});
它模仿你的 selectPre(this.parentNode.nextSibling)
您不再需要附加到 onclick
按钮的属性。
演示:http://jsfiddle.net/5k60nm1y/
请注意,我不得不猜测您的表结构是什么。它可能与您的实际表格不同,因此您可能需要微调 newdiff
的方式。分配给正确的单元格。
如果您需要比 <pre>
的内部内容更复杂的东西标记,您可以通过将自定义函数传递给 text
来微调剪贴板对象的行为剪贴板构造函数选项的属性,而不是使用 target
属性(property)。检查剪贴板主页,这是不言自明的。
正如 Zac 所提到的,如果您可以共享您的 HTML 表格,您会让人们的任务变得更容易(并且您可能会更快地收到解决方案)。我不需要猜测和创造一个假的。此外,我为您提供的代码将直接适用于您的真实表格,而现在它可能仍需要定制。希望我猜对了,我的 table 离你很近。
关于javascript - 具有复制到剪贴板纯 JS 的自定义选择功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33217878/