向剪下板複製文字的js庫——clipboard.js
阿新 • • 發佈:2018-12-31
首先,載入clipboard.js檔案(我上網找的一個cdn):
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
其次,html程式碼:
<input type="text" value="http://suo.im/8p5iq" id="onlineImgUrl"/>
<button id="copyLink" class="btn btn-primary" class="btn dropdown-toggle" data-clipboard-target="#onlineImgUrl" aria-label="複製成功">複製連結</button>
注:
data-clipboard-target屬性 說明覆制的是#onlineImgUrl中的value內容,我這的input框中的value是空的,因為是用動態寫入的。
aria-label屬性 用來提示覆制結果資訊,我這如果複製成功會彈出“複製成功”。
最後,js程式碼這樣:
//複製連結按鈕
var clipboard = new Clipboard('.btn');
clipboard.on('success' , function(e) {
var msg = e.trigger.getAttribute('aria-label');
alert(msg);
});
看看效果圖:
input的框有點ugly……因為input框好像長度不能實現自適應誒,暫時先讓它醜著下( ⊙ o ⊙ )啊!哈呦哦,我圖片網址壓縮了。