在pre代码块中添加“复制”按钮

半兽人 发表于: 2020-03-28   最后更新时间: 2020-03-28 23:25:22  
{{totalSubscript}} 订阅, 3,404 游览

copy-pre.css

.pre-wrapper{
    position:relative;
}
.pre-wrapper pre{
    padding-top: 25px;
}
.pre-wrapper .copy-snippet {
    border-radius: 0;
    min-width:55px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #bbb;
    color: #26589F;
    font-family: 'HELEVETICA',sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42rem;
    margin: 0;
    padding: 0px 5px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    position:absolute;
    background:#ccc;
    top:0;
    left:0;
}
.pre-wrapper .copy-snippet:disabled{
    color:#555;
}

copy-pre.js

jQuery( document).ready(function($){
    var copyid = 0;
    $('pre').each(function(){
        copyid++;
        $(this).attr( 'data-copyid', copyid).wrap( '<div class="pre-wrapper"/>');
        $(this).parent().css( 'margin', $(this).css( 'margin') );
        $('<button class="copy-snippet">Copy</button>').insertAfter( $(this) ).data( 'copytarget',copyid );
    });

    $('body').on( 'click', '.copy-snippet', function(ev){
        ev.preventDefault();

        var $copyButton = $(this);

        $pre = $(document).find('pre[data-copyid=' + $copyButton.data('copytarget' ) + ']');
        if ( $pre.length ) {
            var textArea = document.createElement("textarea");

            // Place in top-left corner of screen regardless of scroll position.
            textArea.style.position = 'fixed';
            textArea.style.top = 0;
            textArea.style.left = 0;

            // Ensure it has a small width and height. Setting to 1px / 1em
            // doesn't work as this gives a negative w/h on some browsers.
            textArea.style.width = '2em';
            textArea.style.height = '2em';

            // We don't need padding, reducing the size if it does flash render.
            textArea.style.padding = 0;

            // Clean up any borders.
            textArea.style.border = 'none';
            textArea.style.outline = 'none';
            textArea.style.boxShadow = 'none';

            // Avoid flash of white box if rendered for any reason.
            textArea.style.background = 'transparent';

            //Set value to text to be copied
            textArea.value = $pre.html();

            document.body.appendChild(textArea);
            textArea.select();

            try {
                document.execCommand('copy');
                $copyButton.text( 'Copied').prop('disabled', true);;
            } catch (err) {
                $copyButton.text( 'FAILED: Could not copy').prop('disabled', true);;
            }
            setTimeout(function(){
                $copyButton.text( 'Copy').prop('disabled', false);;
            }, 3000);
        }
    });
});
更新于 2020-03-28

查看javascript更多相关的文章或提一个关于javascript的问题,也可以与我们一起分享文章