写在前面:
产品需求为了实现用户点击按钮后复制指定内容到手机的剪切板。
其主要思路在于将内容赋值给input或者textarea标签,然后选中其内容,在执行document.execCommand函数。
局限性:
如上面所言,核心主要在于execCommand函数,该函数在一些系统下的兼容性并不理想。
Ios在10.3版本以上效果较好,安卓兼容性可参考官网:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
此外,还有一点局限在于,由于浏览器的安全机制限制,页面需要用户点击后才能够利用脚本实现复制到剪切板的功能,就算模拟点击也暂时无法实现。因此需要引导用户进行页面上的点击。
安卓实现:
function andCopy(){
try {
if (document.execCommand('copy', false, null)) {
var str = '要复制的内容';
var $input = $('<input id="input_dis"/>');
$input.val(str);
$('#addInput').append($input);
var el = $input.get(0);
el.focus();
el.setSelectionRange(0, el.value.length);
document.execCommand('copy', true);
$input.blur();
$('body').find('#input_dis').remove();
}
} catch (err) {
}
}
Ios实现:
function copyParam() {
try{
var str = '要复制的内容';
var $input = $('<input id="input_dis"/>');
$input.val(str);
$('#addInput').append($input);
var el = $input.get(0);
var editable = el.contentEditable;
var readOnly = el.readOnly;
el.contentEditable = true;
el.readOnly = true;
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
document.execCommand('copy');
$input.blur();
$('body').find('#input_dis').remove();
}catch (err){
}
}
网上有很多关于复制剪切板内容的代码,在此仅作为记录,有问题还请多批评指正。谢谢。