JAVASCRIPT复制到剪贴板
来源：个人博客javascript
最近答应张先生替 42qu 写一个短址服务，写的过程当中学到若干新东西，JS操做剪贴板即是其中一例。css
Javascript自己固然提供了操做剪贴板的接口，通常长得像html
function copyToClipboard(text)
{
if (window.clipboardData) // IE
{
window.clipboardData.setData("Text", text);
}
else
{
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
可是，因为各家对于安全这一字眼的认知存在差别，所以，这些既存接口用起来须要勇气——破罐子破摔的勇气。java
因而，我浏览了 StackOverFlow上的讨论 ，其中提到的使用flash hack看起来像是目前最完美解决方案，因而，我开始了 zeroClipboard 探险。因为我在页面中使用ajax 提交form，用了jQuery的库，致使若干问题，为此我再次寻找，发现了后来采用的解决方案—— zClip 。jquery
zClip 结合了zeroClipboard 和 jQuery，知足个人须要，因为其简洁的接口设计，应该也知足大多数人的须要。固然，不得不提的是，其flash依赖致使其存在先天性缺陷，使用请当心。ajax
下面我贴上其官网的使用说明（翻译）：安全
1. 添加jQuery 和 zClip到页面中：ide
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.js"></script>
2. 绑定zClip和你用来复制的按钮（或其余元素）：wordpress
$(document).ready(function(){
$('a#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});
3. 默认复制完成后弹出alert，你能够经过配置beforeCopy 和 afterCopy两个回调函数来自定义：函数
$(document).ready(function(){
$("a#copy-callbacks").zclip({
path:'js/ZeroClipboard.swf',
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#callback-paragraph').css('background','yellow');
$(this).css('color','orange');
},
afterCopy:function(){
$('#callback-paragraph').css('background','green');
$(this).css('color','purple');
$(this).next('.check').show();
}
});
});
4. 可定制参数：
使用注意事项：
-
IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safari 5, Opera 11 测试经过
-
对于正式的CSS效果：
/* zClip is a flash overlay, so it must provide */ /* the target element with "hover" and "active" classes */ /* to simulate native :hover and :active states. */ /* Be sure to write your CSS as follows for best results: */ a:hover, a.hover {...} a:active, a.active {...} -
显示、隐藏、移除zClip：
$('a.copy').zclip('show'); // enable zClip on the selected element $('a.copy').zclip('hide'); // hide zClip on the selected element $('a.copy').zclip('remove'); // remove zClip from the selected element -
为了使效果最好，请在页面的布局固定时绑定zClip到你的元素，虽然有一个函数用以自动调整zClip，但不能保证它不出错。
其余可参考解决方案：