Question

当前代码附加一个按钮，可以快速选择<pre>标记中的某些代码。我想要添加的是能够将该内容复制到剪贴板并将按钮文本更改为“复制”。

如何通过修改下面的当前工作代码来实现它？我不介意使用clipboard.js，jQuery位或只是原生JS支持，因为它是自Chrome 43以来引入的。我只是不知道如何继续添加我需要的东西。

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;
    }
}

Answer 1

由于某种原因，在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.
});

它模仿您不再需要附加到按钮的selectPre(this.parentNode.nextSibling)属性的onclick。

演示：http://jsfiddle.net/5k60nm1y/

请注意，我必须猜测你的表结构是什么。它可能与您的实际表格不同，因此您可能需要微调newdiff分配给正确单元格的方式。

如果您需要的东西比<pre>标记的内部内容更复杂，您可以通过将自定义函数传递给剪贴板的text属性来微调Clipboard对象的行为构造函数选项，而不是使用target属性。检查剪贴板主页，这是不言自明的。

正如Zac所提到的，如果您可以共享HTML表格，那么您可以更轻松地完成人们的工作（并且您可能会更快地获得解决方案）。我不需要猜测并创造一个假的。此外，我提供给你的代码将直接适用于你的真实表，而现在它可能仍然需要定制。希望我猜对了，我的桌子离您很近。

Answer 2

我将此资源How do I copy to the clipboard in JavaScript?中的一段代码应用到您的代码中，以便您轻松了解如何完成此操作。

我还将您的onclick="selectPre(...)"修改为此onclick="selectPre(this)"，并在＆＃34; selectPre＆＃34;中添加了几个变量。功能

这也是Fiddle demo

function selectPre(b) {
    var s;                               // added - selection variable
    var e = b.parentNode.nextSibling;    // added - parent sibling element
    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 s = document.body.createTextRange();
        s.moveToElementText(e);
        s.select();
    }

    // added - copy and change button text
    if (s) {
        try {
            var successful = document.execCommand('copy');
            // var msg = successful ? 'successful' : 'unsuccessful';
            // console.log('Copying text command was ' + msg);
            if (successful) {
                b.innerHTML = "Copied";
            }
        } catch (err) {
            // console.log('Oops, unable to copy');
        }
    }
}
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';

        // altered - onclick handler
        newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs" onclick="selectPre(this)">Select</button></div>' + newdiff.innerHTML;
    }
}

自定义选择功能与复制到剪贴板纯JS

2 个答案: