自定义选择功能与复制到剪贴板纯JS [英] Custom select function with copy to clipboard pure JS

问题描述

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

The current code appends a button to quickly select some code in a <pre> tag. What I want to add is the ability to copy that content to the clipboard and change the button text to "copied".

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

How can I achieve it by modifying the current working code below? I wouldn't mind using clipboard.js, jQuery bits or just native JS support as it was introduced since Chrome 43. I just dont know how to go on from here on adding what I need.

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

推荐答案

某些原因确实在jsfiddle上重现案例时找不到你的 selectPre 函数。 Jsfiddle可以摆脱它认为是死代码的东西，或者为了缩小而重命名它。

For some reason indeed your selectPre function is not found when reproducing the case on jsfiddle. Jsfiddle may get rid of what it thinks is dead code or rename it for the sake of minification.

但是如果它做的是选择<$ c $的内容c>< pre> 标记， clipboard.js 库（你已经准备好了）可以自己做。

But if what it does is selecting the content of a <pre> tag, the clipboard.js library (that you are ready to use) can do that already on its own.

所以你最后要求正确配置Clipboard对象。使用那个：

So you end up by requiring a correct configuration of the Clipboard object. Using that one:

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 属性。

it mimics your selectPre(this.parentNode.nextSibling) that you no longer need to attach to the onclick attribute of your button.

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

注意我不得不猜测你的桌子结构是什么。它可能与您的实际表格不同，因此您可能需要微调 newdiff 如何分配到正确的单元格。

Note that I had to guess what your table structure is. It might differ from your actual table so you may need to fine-tune how newdiff is assigned to the correct cell.

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

If you need something more complicated than just the inner content of the <pre> tag, you could fine-tune the behaviour of the Clipboard object by passing a custom function to the text property of the Clipboard constructor option, instead of using the target property. Check the clipboard homepage, it is quite self-explanatory.

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

As mentioned by Zac, you would have made people's task easier (and you would probably have received a solution much faster) if you could have shared your HTML table. I would not have needed to guess and create a fake one. Furthermore, the code I would have provided you with would have been directly applicable to your real table, whereas now it may still need customization. Hopefully I guessed it right enough and my table is close to yours.

这篇关于自定义选择功能与复制到剪贴板纯JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！