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); }); })