效果图

做为一名合格的站长,要想优雅的发博客,怎么少得了图片呢?这样一来就少不了搭建一个合适的图床!经过漫长的源码选择和修改,今天终于把图床弄满意了!因为要用到快捷复制和单列复制,所以自己加了一个js控制代码!

js一键复制代码

js代码部分

<script>
    function HeiqwCopy() {
                let transfer = document.createElement('input');//创建控件
                document.body.appendChild(transfer);
                transfer.style.cssText = 'position: absolute;right: 45%;top: 80%;'
                transfer.value = document.getElementById('div1').innerText;  // 这里表示想要复制的内容
                transfer.focus();
                transfer.select();
                if (document.execCommand('copy')) {
                    document.execCommand('copy');
                }
                transfer.blur();
                console.log('复制成功'); 
                document.body.removeChild(transfer);//删除控件
    }
</script>

html调用代码部分

<button type='button' onclick='HeiqwCopy()'>复制</button>

html被复制内容部分

<div id='div1'>复制</div>

网上很多方法,这个不用额外加载js库,这个功能就是在原生js只能复制可编辑区域的基础上改的复制不可编辑区域,即div

发表评论

您的电子邮箱地址不会被公开。