Clipboard复制/剪切插件
3 2 7542 0
有侵犯版权请及时联系我们,我们将在24小时内删除素材。
投诉举报


Clipboard.min.js 可以轻松实现复制剪切功能,不依赖Flash。

Github地址:https://github.com/zenorocha/clipboard.js


支持的主流浏览器:Chrome 42 ; Edge 12 ;Firefox 41 ; IE 9 ; Opera 29 ; Safari 10 ;


引入js

<script src="js/clipboard.min.js"></script>


html代码

<div class="form-group">
    <div>复制示例1:</div>
    <div class="btn btn-sm btn-info" data-clipboard-text="https://www.yusan.cn">复制</div> 
 </div>
            	
<div class="form-group">
    <div>复制示例2:</div>
    <div id="copy-text">这是要复制的内容,我们要我们自己要快乐!</div>
    <div class="btn btn-sm btn-info" data-clipboard-target="#copy-text">复制</div> 
</div>
            	
            	
<div class="form-group">
    <div>剪切示例(剪切操作只在input 或者 textarea元素上才有效)</div>
    <div>
        <input type="text" id="input-text" value="我们要快乐" class="form-control">
        <textarea id="textarea-text" class="form-control">程序员应该拒绝996的</textarea>
        <button class="btn btn-sm btn-danger" data-clipboard-action="cut" data-clipboard-target="#input-text">
            剪切Input
        </button>
        <button class="btn btn-sm btn-danger" data-clipboard-action="cut" data-clipboard-target="#textarea-text">
    	剪切Textarea
        </button>
    </div>
</div>


js代码

$().ready(function(){
	 //复制剪切
	var clipboard = new ClipboardJS('.btn');
	clipboard.on('success', function(e) {
	    console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);
	    alert("操作:" e.action "内容:" e.text);
	    e.clearSelection();
	});
		
	clipboard.on('error', function(e) {
	    alert("操作失败!");
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);
	});
})



评论(0) 帮助他人、分享经验 我要评论
上传时间: 2021-01-11
分类: 代码 /  插件
文件大小: 81.68 KB
标签: 复制 clipboard 剪切
收藏
下载
请在Safari浏览器下载