当前代码附加一个按钮,以快速选择< pre>标签.我想添加的是将内容复制到剪贴板并将按钮文本更改为“复制”的功能.
如何通过修改下面的工作代码来实现呢？我不介意使用clipboard.js,jQuery位或只是原生的JS支持,因为它是从Chrome 43引入的.我只是不知道如何继续从这里添加我需要的.
function selectPre(e) {
if (window.getSelection) {
var s = window.getSelection();
if (s.setBaseAndExtent) {
s.setBaseAndExtent(e,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;
}
}
解决方法
由于某些原因确实在jsfiddle上复制大小写时,没有找到您的selectPre函数. Jsfiddle可以摆脱它认为是死亡代码或重命名它为了缩小.
但是,如果它的作用是选择< pre>标签,clipboard.js库(你准备使用)可以自己做这个.
所以最终需要正确配置Clipboard对象.使用那个：
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.
});
它会模拟您不再需要附加到按钮的onclick属性的selectPre(this.parentNode.nextSibling).
演示：http://jsfiddle.net/5k60nm1y/
请注意,我不得不猜测你的表结构是什么.它可能与您的实际表不同,因此您可能需要微调将newdiff分配给正确的单元格.
如果您需要的内容比< pre>标签,您可以通过将自定义函数传递到剪贴板构造函数选项的text属性而不是使用目标属性来微调剪贴板对象的行为.检查剪贴板首页,这是很自明的.
如Zac所提到的那样,如果你可以共享你的HTML表,那么你可以更容易地让人的工作变得更简单(你可能会更快地收到一个解决方案).我不需要猜测并创造一个假的.此外,我将提供给您的代码将直接适用于您的真实表,而现在它可能仍然需要定制.希望我猜到它够好,我的桌子靠近你的桌子.
