说明:新版浏览器差不多均可以(ie9以下不可以 ),试过内核比较老版本的浏览器为了安全是禁止复制的,所以要实现复制要开启浏览器配置的参数(/但这样不安全),有的浏览器复制之前是会提示是否允许复制,若禁止提示或直接叉掉或拒绝,复制功能都会失效
一:jquery 插件
1.clipboard.js
官网:https://clipboardjs.com/ (使用方法参考官网)
使用注意:
1.引用插件js文件:如<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
2.实例化:new Clipboard('.类名') 要实现复制功能的按钮须添加上指定class ,如new Clipboard('.btn')
3.实现复制(基本使用):
(1)data-clipboard-target="#复制标签的id" //复制内容为复制标签的value
<!-- Target -->
<inputid="foo"value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<buttonclass="btn"data-clipboard-target="#foo"><imgsrc="assets/clippy.svg"alt="Copy to clipboard"></button>
<!-- Target -->
<textareaid="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<buttonclass="btn"data-clipboard-action="cut"data-clipboard-target="#bar"> Cut to clipboard</button>
(2)data-clipboard-text="复制文本"
<!-- Trigger -->
<buttonclass="btn"data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard</button>
(3)事件:
var clipboard = new Clipboard('.btn');
clipboard.on('success',function(e){
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error',function(e){
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
具体查看官网
2.zclip(js和jq两个版本,最大缺点是要使用flash)
(1)jquery-zclip:
github:https://github.com/patricklodder/jquery-zclip
简单使用如下(具体看文档):
引入js文件:<script type="text/javascript" src="../js/jquery_zclip/jquery.zclip.js"></script>
复制内容控件:
<button class="copyData-btn2" data-copy="11">复制</button>
<button class="copyData-btn2" data-copy="22">复制</button>
jquery方法:
$(".copyData-btn2").zclip({
path: '../js/jquery_zclip/ZeroClipboard.swf',
copy: function(){
return $(this).data('copy');
}
});
http://www.cnblogs.com/tinyphp/p/3394819.html
(2)ZeroClipboard.js
http://www.cnblogs.com/tinyphp/p/3307522.html
3.js: document.execCommand("copy")
<input type="text" name="member_card_name" maxlength="6" id="member_card_name" class="layui-input" placeholder="最多6个字符">
<a href="javascript:void(0)" class="btn btn-danger btn-xs btn-chat" οnclick="copy_data('member_card_name')">
<span class="glyphicon glyphicon-copy"></span> 复制
</a>
function copy_data(elemtID){
var succeed = copyToClipboard(document.getElementById(elemtID));
if(succeed)
{
layer.msg('文本复制成功!', {icon: 1});
}
else
{
layer.msg('文本复制失败!', {icon: 5});
}
}
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
4.老版本浏览器内核支持
function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); clipboardData.setData("Text", txt); alert("复制成功!"); } else if (navigator.userAgent.indexOf("Opera") != -1) { window.location = txt; } else if (window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'"); } var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor("text/unicode"); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); var copytext = txt; str.data = copytext; trans.setTransferData("text/unicode", str, copytext.length * 2); var clipid = Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans, null, clipid.kGlobalClipboard); alert("复制成功!"); } }
http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html