美文网首页
【转】兼容多浏览器的js快速复制代码实现

【转】兼容多浏览器的js快速复制代码实现

作者: alanwhy | 来源:发表于2018-12-20 08:55 被阅读15次

    原文链接:浅谈 JS 复制

    需求

    点击按钮实现复制 用户名的功能

    问题分析

    使用 window.clipboardData 实现了 IE 下的复制功能,但不支持Chrome等其他浏览器
    百度发现了 Zepto.js,非常好用

    解决思路

    Chrome/Firefox 支持 Window.getSelection,做了简单的封装,替换掉 Zepto.js,有简化掉了很多代码

    代码实现

    <!DOCTYPE html>
    <html lang="zh-CN">
     
    <head>
     
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>JS复制 演示/支持IE、Chrome,兼容电脑、手机 - miaoqiyuan.cn</title>
        <style type="text/css">
        html {}
     
        body {
            margin: 0;
            background: #EEE;
        }
     
        h2 {
            text-align: center;
            font-family: 'Microsoft Yahei';
        }
     
        button {
            float: right;
        }
     
        .demo-list {
            width: 300px;
            margin: 10px auto;
        }
     
        .demo-list-item {
            background: #FAFAFA;
            border: solid 5px #DDD;
            border-radius: 15px;
            padding: 15px;
            margin-top: 15px;
        }
        </style>
        <script type="text/javascript">
        function copy(domId) {
            if (copyDom(document.getElementById(domId))) {
                alert('复制成功');
            } else {
                alert('当前浏览器不支持');
            }
        }
     
        function copyDom(dom) {
            if ('clipboardData' in window) {
                window.clipboardData.setData('Text', dom.value || dom.innerText || dom.innerHTML);
            } else if ('execCommand' in document && 'getSelection' in window) {
                var domType = 'input';
                try {
                    dom.select();
                } catch (e) {
                    domType = 'text';
                    window.getSelection().selectAllChildren(dom);
                }
                document.execCommand("Copy");
                if (domType == 'input') {
                    dom.blur();
                } else {
                    window.getSelection().empty();
                }
            } else {
                return false;
            }
            return true;
        }
        </script>
    </head>
     
    <body>
        <h2><a href="http://www.miaoqiyuan.cn/p/js-copy">JS复制 演示/支持IE、Chrome,兼容电脑、手机</a></h2>
        <div class="demo-list">
            <div class="demo-list-item">
                <button onclick="copy('demo_div');">复制</button>
                <div id="demo_div">DIV</div>
            </div>
            <div class="demo-list-item">
                <button onclick="copy('demo_input');">复制</button>
                <input id="demo_input" value="INPUT"><br >(不支持iPhone)
            </div>
            <div class="demo-list-item">
                <button onclick="copy('demo_textarea');">复制</button>
                <textarea id="demo_textarea">TEXTAREA</textarea><br >(不支持iPhone)
            </div>
            <div class="demo-list-item">
                <button onclick="copy('demo_divs');">复制</button>
                <div id="demo_divs">
                    <p>DIVS</p>
                    <p>DIVS</p>
                </div>
            </div>
        </div>
    </body>
     
    </html>
    

    测试地址

    http://www.miaoqiyuan.cn/products/copy.html

    相关文章

      网友评论

          本文标题:【转】兼容多浏览器的js快速复制代码实现

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