最好用的html复制插件——Clipboard.js

官网:http://www.clipboardjs.cn/

(定时触发,页面加载前触发,页面加载后触发,点击触发,鼠标触发,内容改变后触发)

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<div id="ta" contenteditable="true" style="border:1px solid red">
    <p>
        <font color="#b6b6b6"><span style="font-size: 28px;">[发怒][调皮][调皮][偷笑][偷笑][发怒]</span></font>
    </p>
</div>

<button id="target" action="copy" data-clipboard-target="#ta">Copy to clipboard</button>

<script>
    var clipboard = new Clipboard('#target'),
        timer;
        
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    
        e.clearSelection();
        clearInterval(timer);
        alert('复制成功,停止计时器')
    });
    
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    
    $(window).load(function() { //自动复制
        timer = setInterval(function() {
            $('#target').trigger('click');
        }, 1000)
    });
    
    clipboard.destroy();
</script>

 

上一篇:vue项目之复制粘贴文本


下一篇:安卓app如何从剪贴板获取图片