美文网首页
jquery实现点击复制文本功能

jquery实现点击复制文本功能

作者: 吕保鑫 | 来源:发表于2021-01-19 16:41 被阅读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>
    
    

    相关文章

      网友评论

          本文标题:jquery实现点击复制文本功能

          本文链接:https://www.haomeiwen.com/subject/psqczktx.html