jquery、js 复制到黏贴板
来源:互联网 发布:淘宝怎么买砍刀 编辑:程序博客网 时间:2024/05/18 03:54
说明:新版浏览器差不多均可以(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" onclick="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
- jquery、js 复制到黏贴板
- JS复制内容到黏贴板
- js复制到黏贴板代码 可以兼容多浏览器
- android 复制黏贴板。
- bcb实现_从excel复制数据到黏贴板再从黏贴板读取数据到StringGrid
- Android 复制内容到黏贴版
- js实现剪切板效果复制黏贴图片
- js 屏蔽鼠标右键,复制,黏贴,保存
- ZeroClipboard实现复制黏贴板功能
- zeroclipboard --- 让浏览器支持复制黏贴到剪切板
- js实现禁止复制,黏贴和选取-------Day54
- js鼠标禁止右键,复制,黏贴等功能
- js代码实现禁止选择文字复制黏贴
- VIM 复制黏贴
- Android 复制 黏贴
- vim复制黏贴问题
- vim复制与黏贴
- 复制黏贴不是全部
- ajax自动补全
- 堆排序 java
- 针对复制东西Eclipse或者MyEclipse中出现cannot paste the clipboard contents into the selected elements报错问题
- 【微信小程序】把客服按钮替换成自己想要的图片
- 多线程编程学习四(Lock 的使用)
- jquery、js 复制到黏贴板
- 响应式Web设计:Media Queries和Viewport的区别和用法
- 纸牌博弈问题
- Android N (7.0) 数据拨号前的准备工作
- Spring Boot 配置ContextPath
- CEF3:与 JavaScript 整合(三)—— IPC 通信
- Android 高德地图 自己位置的显示与点地图上任意一点的坐标
- Excel 复制一类数据到另一列合并过单元格的列中
- android获取设备信息的方法