20 行 JS 代码，实现复制到剪贴板功能

转自：20 行 JS 代码，实现复制到剪贴板功能

HTML

代码语言：javascript复制

<div class="rui-upload-btn rui-btng" data-copytarget="#rui-base64-result" id="copy-text-btn">复制</div>
<div class="rui-base64-box">
    <textarea name="rui-base64-result" id="rui-base64-result">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ 2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd X3az/ufvdtcH6H7 d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon Hv Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz WY9pzSAGaAJeErq2/BXLob0GgQ STgTflhJCMRpUxTxjMFbDl EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS  jHU1Ii h/eIX0UTi04d G bVtbqtcjdVorZi3Lk9/VHtw Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/ L9dSqp HS4 Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC gECIwg0AAAAASUVORK5CYII=</textarea>
</div>

JS

代码语言：javascript复制

(function () { 
    'use strict'; 
    // click events 
    // 添加复制按钮点击事件 
    document.body.addEventListener('click', copy, true); 
    // event handler
    // 添加事件处理方法 
    function copy(e) { 
            // find target element 
            // 搜索目标元素 
            var t = e.target, 
            c = t.dataset.copytarget, 
            inp = (c ? document.querySelector(c): null); 
            // is element selectable? 
            // 判断元素是否能被选中 
            if (inp && inp.select) { 
                // select text 
                // 选择文本 
                inp.select();
            try { 
                // copy text 
                // 复制文本 
                document.execCommand('copy'); 
                inp.blur(); 
            } catch (err) { 
                alert('请使用 Ctrl/Cmd C 进行复制!');
            } 
        } 
    } 
})();

DEMO应用

图片在线转换base64

html base64

0 人点赞