如果只是兼容IE可用如下方法实现:
- function copyToClipboard() {
- var format = "text";
- var value;
- var isIE = false;
- if(!+[1,]) {
- isIE = true;
- }
- if(isIE) {
- value = document.getElementById("exCode").outerText;
- if(window.clipboardData) {
- window.clipboardData.setData(format, value);
- }
- alert("已拷贝到剪切板!");
- }
- }
但是非IE等浏览器及Firefox、Chrome、Opera等都不支持window.clipboardData对象,且不允许前端页面直接复制元素信息至剪贴板,所以要实现兼容所有浏览器的实现复制到剪贴板的功能需用到ZeroClipboard.js、ZeroClipboard.swf、jquery-1.7.1.js等核心JS Framework:
具体实现如下:
- $(function() {
- ZeroClipboardInit();
- });
- function ZeroClipboardInit() {
- var clip = new ZeroClipboard.Client();
- clip.addEventListener('complete', function(client, text) {
- alert("已拷贝到剪切板!");
- //多个拷贝按钮需要绑定拷贝时需移除上一个clip
- clip.destroy();
- });
- clip.setText('what you want to copy to Clipboard');
- //绑定DOM中的元素ID,一般为Input
- clip.glue('BtnExport');
- }
注:ZeroClipboard包下载地址如下:http://code.google.com/p/zeroclipboard/