js复制内容至剪切板并弹出toast

如今，无论是App亦或是PC，当存在复制操作时，相信每一个都不会自己动手进行输入。而，复制成功之后，如何将其复制在剪切板中，我们粘贴就可以。这个问题，如果不是今天存在这样的需求，估计小编自己都不会想到这么一个东西。虽然简单，但还是想贴出来，和大家分享下。代码献上：
1、Android
html:

<body style="font-size: 16px;">
    <div class="main">
        <div class="container">
            <span id="qq_num">12345678</span>
            <span id="copy">点击复制</span>                         
        </div>

        <div id="m-toast-pop" class="m-toast-pop">
            <div class="m-toast-inner">
                <div class="m-toast-inner-text" id="m-toast-inner-text">复制成功</div>
            </div>
        </div>
    </div>
</body>

css:

<style>
        #copy{
            color: #FE2C54;
            font-size: 0.8125em;
            margin-left: 0.75em;
        }

        .m-toast-pop {
            display: none;
            position: fixed;
            width: 100%;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
            text-align: center;
        }

        .m-toast-inner {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            text-align: center;
        }

        .m-toast-inner-text {
            display: inline-block;
            margin: 0 1.375em;
            padding: 1.1875em 1.3125em;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 1.375em;
            background: rgba(0, 0, 0, 0.72);
            border-radius: 0.625em;
        }
    </style>

js：

<script>
    $("#copy").on("click", function () {
        $('#m-toast-pop').fadeIn();
        setTimeout(function () {
            $('#m-toast-pop').fadeOut();
        }, 1000);

        var qq=document.getElementById("qq_num").innerText;
        var oInput=document.createElement('input');
        oInput.value = qq;
        document.body.appendChild(oInput);
        oInput.select(); 
        document.execCommand("Copy"); 
        oInput.className = 'oInput';
        oInput.style.display='none';
    })
</script>

2、IOS、Android
html:

<body style="font-size: 16px;">
    <div class="main">
        <div class="container">
            <span id="selector">12345678</span>
            <button id="copy">点击复制</button>                         
        </div>

        <div id="m-toast-pop" class="m-toast-pop">
            <div class="m-toast-inner">
                <div class="m-toast-inner-text" id="m-toast-inner-text">复制成功</div>
            </div>
        </div>
    </div>
</body>

css:

#copy{
            color: #FE2C54;
            font-size: 0.8125em;
            border:none;
            background:#232226;
            margin-left: 0.75em;
        }

        .m-toast-pop {
            display: none;
            position: fixed;
            width: 100%;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
            text-align: center;
        }

        .m-toast-inner {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            text-align: center;
        }

        .m-toast-inner-text {
            display: inline-block;
            margin: 0 1.375em;
            padding: 1.1875em 1.3125em;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 1.375em;
            background: rgba(0, 0, 0, 0.72);
            border-radius: 0.625em;
        }
    </style>

js:

var aEle = document.querySelector('#copy');
    aEle.addEventListener('click',function(){
        $('#m-toast-inner-text').text('复制成功');
        $('#m-toast-pop').fadeIn();
        setTimeout(function () {
            $('#m-toast-pop').fadeOut();
        }, 1000);

        var copyDOM = document.querySelector('#selector');  
        var range = document.createRange();  
        range.selectNode(copyDOM);
        window.getSelection().addRange(range);
        var successful = document.execCommand('copy');  
        try {  
        // Now that we've selected the anchor text, execute the copy command  

        var msg = successful ? 'successful' : 'unsuccessful';  
        console.log('Copy email command was ' + msg);  
        } catch(err) {  
        console.log('Oops, unable to copy');  
        }
        window.getSelection().removeAllRanges();  

    },false);

js复制内容至剪切板并弹出toast

猜你喜欢