如何实现博客园代码块的全选功能?

2020-11-02 21:27发布

我也尝试百度解决,但未找到解决办法,望大佬们指点一二。谢谢
希望效果图如下:

标签:
2条回答
叼着烟拽天下
2楼-- · 2020-11-02 21:40

博客园代码块全选功能目前的实现代码如下

function copyCnblogsCode(element) {
    var codeContainer = getCnblogsCodeContainer(element);
    var cbCode = getCnblogsCodeText(codeContainer);
    var originalChildren = document.createElement("div");
    var textarea = document.createElement("textarea");
    $(textarea).val(cbCode); //.select();
    $(textarea).css("width", $(codeContainer).width());
    var height = $(codeContainer).height() * 0.8;
    if (height > 600) height = 600;
    $(textarea).css("height", height);
    $(textarea).css("font-family", "Courier New");
    $(textarea).css("font-size", "12px");
    $(textarea).css("line-height", "1.5");

    $(codeContainer).children().appendTo($(originalChildren));
    $(codeContainer).children().remove();
    $(codeContainer).append(originalChildren);
    $(originalChildren).hide();
    $(textarea).appendTo($(codeContainer));
    $("<div>按 Ctrl+C 复制代码</div>").insertBefore($(textarea));
    $("<div>按 Ctrl+C 复制代码</div>").insertAfter($(textarea));
    $(textarea).select();
    $(textarea).blur(function() {
        $(textarea).prev().remove();
        $(textarea).next().remove();
        $(textarea).remove();
        $(codeContainer).html($(originalChildren).html());
        bindCodeCollapseImages();
    });
}
查看更多
Emotional °昔
3楼-- · 2020-11-02 21:49

这个应该是监听键盘ctr+a

查看更多
登录 后发表回答