javascript – 自定义选择功能,复制到剪贴板纯JS

当前代码附加一个按钮,以快速选择< 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表,那么你可以更容易地让人的工作变得更简单(你可能会更快地收到一个解决方案).我不需要猜测并创造一个假的.此外,我将提供给您的代码将直接适用于您的真实表,而现在它可能仍然需要定制.希望我猜到它够好,我的桌子靠近你的桌子.