zeroclipboard是走的flash插件,手機瀏覽器是不支持的,所以不得不舍棄之,用clipboard,clipboard不需要flash就可以完成復制剪切等功能,而且可以兼容pc,移動端,下面介紹如下
下面這個js插件能實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<title>移動端復制到剪貼板!</title>
</head>
<body>
<p>哈哈<span id="target">你沒看錯,就是復制的這里</span></p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
復制按鈕
</button>
</body>
<script>
$(document).ready(function(){
var targetText=$("#target").text();
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("復制成功");
e.clearSelection();
});
});
</script>
</html>
如果項目中用到了 requirejs,會出現 Uncaught ReferenceError: Clipboard is not defined,可是文件確實都引入進去了的,死活找不到答案,最好各種百度菜找到答案,
這是因為在有requirejs時,Clipboard不會把自己暴露為全局變量。
可以把Clipboard定義到requirejs的配置模塊,然后如下使用:
define(['clipboard'],function(clipboard){
window['Clipboard']=clipboard;
var clipboard = new Clipboard('.copy-button');
clipboard.on('success', function(e) {
layer.msg("復制成功");
e.clearSelection();
});
大功告成,總算完成
});
參考:https://github.com/3yteam/personalDemo/tree/master/projectSummary/copy
