您好,登錄后才能下訂單哦!
本篇文章為大家展示了js剪切板Clipboard.js 使用方法是什么,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
js剪切板Clipboard.js
clipboard.js是一個用來設(shè)置剪切板的庫,小巧無依賴,但用法有點(diǎn)詭異,必須依賴一個DOM元素。
必須要與一個DOM元素相關(guān)聯(lián),并且需要用戶的點(diǎn)擊操作才能實(shí)現(xiàn)功能(這樣看來,瀏覽器還是挺安全的)
普通使用推薦下面這種用法,這里的text可以動態(tài)設(shè)置,可以寫一個js函數(shù)動態(tài)返回text
var clipboard = new ClipboardJS('#btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
// return randomText();
}
});
clipboard.on("success", function (e) {
console.log("復(fù)制成功");
});
clipboard.on("error", function (e) {
console.log("復(fù)制失敗,請手動復(fù)制");
});
如果要在bootstrap的modal中使用,上面的代碼會無法正常工作,需要在構(gòu)造函數(shù)里多傳入一個container,這個container就是這個模態(tài)框
var clipboard = new ClipboardJS('#btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
},
container: document.getElementById('dialog')
});
clipboard.on("success", function (e) {
console.log("復(fù)制成功");
});
clipboard.on("error", function (e) {
console.log("復(fù)制失敗,請手動復(fù)制");
});
界面里沒有button也是可以用的
<span id="wechat_account" data-clipboard-text="aaa">aaa</span>
jQuery(document).on('tap', '#wechat_account', function (evt) {
var clipboard = new ClipboardJS("#wechat_account");
clipboard.on("success", function (e) {
mui.toast("微 信號復(fù)制成功");
});
clipboard.on("error", function (e) {
mui.toast("微-信號復(fù)制失敗,請手動輸入微-信號");
});
$('#wechat_account').trigger('click');
});
上述內(nèi)容就是js剪切板Clipboard.js 使用方法是什么,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。