H5複製貼上雙端適配的解決方案(終極版)

NO IMAGE

前言

最終適配所有機型的方案基於clipboardjs
官網https://clipboardjs.com/

這個庫由幾個不同的CDN提供商託管。選擇你最喜歡的:)

jsDelivr
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
RawGit
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>
unpkg
<script src="https://unpkg.com/[email protected]/dist/clipboard.min.js"></script>

HTML部分按照clipboard提供的API進行編寫

<input readonly="readonly" type="text" value="414" class="code"/>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".code">複製</button>    

JS

    //複製
$('.btn').on('click', function(){
//這部分使用原生的複製方法
$('.code').select();
document.execCommand("copy",false,null);
//這部分使用clipboardjs提供的複製方法
var clipboard = new Clipboard('.btn');   
clipboard.on('success', function(e) {  
e.clearSelection();  
});   
alert('複製成功。');
//clipboardjs提供的複製失敗的方法,進行復制失敗提示
clipboard.on('error', function(e) {  
alert('複製失敗,請手動選擇複製。');
});  
})

segmentfault上其他相關分享
使用clipboard實現前端頁面複製到貼上板的功能
Vue中配合clipboard.js實現點選按鈕複製內容到剪下板

圖片描述