HTML 點擊復(fù)制鏈接代碼
在編寫網(wǎng)頁時,我們會經(jīng)常需要使用到鏈接,有時候需要將鏈接分享給他人,那么如何方便地將一個鏈接復(fù)制到剪切板中呢?下面就來介紹一種使用 HTML 實現(xiàn)點擊復(fù)制鏈接的方法。
首先,我們需要使用一個 button 標簽,將鏈接放在自定義屬性 data-link 中,如下所示:
請點擊以下按鈕復(fù)制鏈接:
接下來,我們需要使用 JavaScript 實現(xiàn)點擊按鈕后將鏈接復(fù)制到剪切板中的功能。需要用到 Clipboard API。首先在 button 標簽中添加一個事件監(jiān)聽函數(shù),將鏈接復(fù)制到剪切板:然后,在 JavaScript 中實現(xiàn) copyLink 函數(shù): function copyLink() { const link = document.getElementById('btn-copy').dataset.link; navigator.clipboard.writeText(link).then(() =>{ console.log('Link copied to clipboard'); }); } 在函數(shù)中,我們首先獲取到 button 標簽中的 data-link 屬性,然后調(diào)用 navigator.clipboard.writeText 方法將鏈接寫入剪切板中。如果復(fù)制成功,則在控制臺輸出“Link copied to clipboard”。 最后,在 HTML 中添加一個 pre 標簽展示代碼:function copyLink() { const link = document.getElementById('btn-copy').dataset.link; navigator.clipboard.writeText(link).then(() =>{ console.log('Link copied to clipboard'); }); }這樣我們就實現(xiàn)了點擊按鈕復(fù)制鏈接的功能。以上代碼可以直接復(fù)制到 HTML 文檔中使用,只需要將 data-link 屬性替換成對應(yīng)鏈接即可。