copyTextToClipboard - pod4g/tool GitHub Wiki
更新于2016-09-22
经过测试终于知道了为什么 在PC safari10下，document.execCommand('copy')会返回true，但是剪切板却无内容，在拷贝时，增大创建的textarea的大小即可拷贝成功。
在手机safari10下copyTextToClipboard不再管用。。但是可以通过js代码拷贝选中的文字。
新的复制到剪切板工具方法如下：
function copyTextToClipboard(text, success, error) {
success = success || function() {};
error = error || function() {};
// 如果是IE，就使用IE专有方式进行拷贝
// 好处是可以直接复制而不用曲线救国，创建textarea来实现。
if (window.clipboardData) {
var successful = window.clipboardData.setData('Text', text);
if (successful) {
success();
} else {
error();
}
} else {
var textArea = document.createElement('textarea');
var styleArr = [
'position:', 'fixed;',
'top:', '0;',
'left:', '0;',
'padding:', '0;',
// 针对safari10
// 增大textarea的大小，否则的话在safari10中successful为true，
// 但却什么也没拷贝
'width:', '31px;',
'height:', '21px;',
'border:', 'none;',
'outline:', 'none;',
'boxShadow:', 'none;',
'background:', 'transparent;',
// 针对safari10
// 因为增大了textarea的大小，故使用其他技巧隐藏之
'opacity:', '0;',
'z-index:','-1;'
];
textArea.style.cssText = styleArr.join('');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
try {
if (successful) {
success();
} else {
error();
}
} catch (e) {
console.log('执行success或error有异常！！！！！');
console.error(e);
}
} catch (e) {
console.log('Oops, unable to copy');
error();
}
// 卸磨杀驴
document.body.removeChild(textArea);
}
}
更新于2016-09-21
今天，苹果发出了safari10的更新，我更新之后，发现document.execCommand('copy')会返回true，但是剪切板却无内容
测试时间：2016-07-19
测试环境：MAC、windows7、windows10
一、复制到剪切板使用的API
-
window.clipboardData.setData('Text',content)：经过测试，支持的浏览器有IE6/7/8/9/10/11。boolean返回值。注意：Edge并不支持这个方法。 -
document.execCommand('copy')：经过测试，支持的浏览器有IE6/7/8/9/10/11/Edge/Chrome/Opera/Firefox。boolean返回值。
在IE6/6/7/8/9/10/11中，调用上述2个API都会弹窗询问用户确实允许此网页访问“剪切板”吗？，
若选择“允许访问”，上述2个API返回true,选择“不允许”，返回false
第2个API，在Firefox和Edge中，直接执行（在console中执行），是无法达到想要的效果的，并且在Firefox中会出现警告document.execCommand('cut'/'copy') was denied because it was not called from inside a short running user-generated event handler.
第2个API，必须得是在有用户触发的操作中调用，例如用户点击
safari中其实是实现了第2个API，但是却禁止掉了这个API，调用它时，永远返回false，且不会拷贝任何内容
一个小技巧，如果复制失败，可以用
prompt('复制失败，请复制下列文本','我是要被复制的文本')弹出提示，prompt下面的输入框弹出时默认是选中状态的
二、使用上述2个API实现复制到剪切板的功能
/*
复制到剪切板
text：要复制的文本。
success：复制成功之后执行的回调。例如，提示用户复制成功。
error：复制失败之后执行的回调。例如，提示用户复制失败，请用户自己进行复制操作。
完美支持的浏览器： Edge/Firefox/Chrome/Opera
支持但用户体验不太好的浏览器：IE6/7/8/9/10/11 会弹窗询问用户是否允许网页访问系统剪切板
不支持的浏览器：Safari
由于安全性的原因，safari不支持，可以在error回调中作出相应的处理
例如选中文本，让用户直接复制，而不用先长按选中或鼠标选中再复制
*/
function copyTextToClipboard(text, success, error) {
success = success || function() {};
error = error || function() {};
// 如果是IE，就使用IE专有方式进行拷贝
// 好处是可以直接复制而不用曲线救国，创建textarea来实现。
if (window.clipboardData) {
var successful = window.clipboardData.setData('Text', text);
if (successful) {
success();
} else {
error();
}
} else {
var textArea = document.createElement('textarea');
var styleArr = [
'position:', 'fixed;',
'top:', '0;',
'left:', '0;',
'padding:', '0;',
'width:', '1px;',
'height:', '1px;',
'border:', 'none;',
'outline:', 'none;',
'boxShadow:', 'none;',
'background:', 'transparent'
];
textArea.style.cssText = styleArr.join('');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
try {
if (successful) {
success();
} else {
error();
}
} catch (e) {
console.log('执行success或error有异常！！！！！');
console.error(e);
}
} catch (e) {
console.log('Oops, unable to copy');
error();
}
// 卸磨杀驴
document.body.removeChild(textArea);
}
}
三、两个库
- 据说这个库兼容所有主流浏览器，实现方式是老生常谈的flash，我在挑剔的safari试了试，能复制成功。
https://github.com/zeroclipboard/ZeroClipboard
-
github上用的复制到剪切板。没有用flash。在safari上不可用