jquery实现点击复制文本功能

2021-01-19  本文已影响0人  吕保鑫
copy.jpg
<div class="code copyDiv">
    <pre style="height:135px;"><code id="codeText"></code></pre>
    <span class="forXsCancelBtn copyBtn">复制</span>
    <p id="copySuccess" style="display: none;"><span>复制成功</span></p>
</div>
.copyDiv {
background: #f2f5f9;
border-radius: 4px;
resize: none;
padding: 16px;
color: #81868f;
position: relative;
}
#copySuccess {
position: absolute;
left: 50%;
bottom: 45px;
transform: translate(-50%,0);
}

#copySuccess span {
border: 1px solid transparent;
padding: 10px;
background: #dadbde;
color: #fff;
}

<script>
    //网页插件点击copy功能
    $('.copyBtn').click(function () {
        selectText("codeText");//选择要复制的id
        document.execCommand("copy");//执行复制操作
        //插件代码复制成功后提示文字
        $('#copySuccess').css('display', 'block');
        setTimeout("$('#copySuccess').css('display', 'none')", 1500); //自动隐藏提示文字
    })
    function setCode() {
        var code = '';
        code += 'http://www.baidu.com';
        $('#codeText').text(code);
    }
    setCode();
    //选择要被复制的文字范围
    function selectText(element) {
        var text = document.getElementById(element);
        if (document.body.createTextRange) {
            var range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
</script>

上一篇下一篇

猜你喜欢

热点阅读