昨天發(fā)布一篇關(guān)于網(wǎng)頁一鍵復(fù)制彈出提示窗口后幾秒后自動關(guān)閉提示js代碼,結(jié)果今天朋友用的時候發(fā)現(xiàn)只能用在一段文字內(nèi)容上復(fù)制,如果是循環(huán)列表的那種內(nèi)容就沒辦法每一條都能單獨(dú)復(fù)制,到網(wǎng)上找了一段代碼完全可用,我現(xiàn)在把代碼貼出來,要用到一個開源的js
clipboard.js 是一個 Github 上的開源項(xiàng)目,可以實(shí)現(xiàn)純 JavaScript 的瀏覽器內(nèi)容復(fù)制到系統(tǒng)剪貼板的功能。
clipboard.js下載鏈接: https://pan.baidu.com/s/1v_tWgZTtzqYjqhaG_F7MKw 提取碼: ag45 復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機(jī)App,操作更方便哦
以下代碼
網(wǎng)頁哪里需要一鍵復(fù)制功能就使用這段
<button class="itemCopy red_tkl button_tkl" id="TKLS"??type="button" data-clipboard-text="需要復(fù)制的內(nèi)容">一鍵復(fù)制</button>
其中data-clipboard-text="需要復(fù)制的內(nèi)容"? 這里的需要復(fù)制的內(nèi)容可以是變量標(biāo)簽,比如可以使用織夢的標(biāo)題標(biāo)簽,內(nèi)容標(biāo)簽等等
<button class="itemCopy red_tkl button_tkl" id="TKLS"??type="button" data-clipboard-text="需要復(fù)制的內(nèi)容">一鍵復(fù)制</button>
<script src="http://www.520ym.net/clipboard.min.js" type="text/javascript"></script><!-- 這個js文件,上面有下載鏈接,替換這里的引用地址-->
<script>
var clipboard = new Clipboard('.itemCopy');
clipboard.on('success',
function(e) {
????if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
????????e.trigger.innerHTML = "復(fù)制成功";
????????e.trigger.disabled = true;
????????setTimeout(function() {
? ? ? e.trigger.innerHTML = "一鍵復(fù)制";
????????????e.trigger.disabled = false;
????????},
????????2000);
????}
});
clipboard.on('error',
function(e) {
????e.trigger.innerHTML = "復(fù)制失敗";
});
</script>