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

• Z时代
• 2024-01-10
• 分类：技术分享

我也尝试百度解决，但未找到解决办法，望大佬们指点一二。谢谢

希望效果图如下：

回答

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

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

以上是 如何实现博客园代码块的全选功能？ 的全部内容， 来源链接： utcz.com/a/64578.html