構建網站時經常會用到將文本復制到剪貼板的需求,下面是常用做法,兼容舊版瀏覽器。
- 創建<input>元素,將其值設置為要復制到剪貼板上的字符串。
- 將<input>元素附加到當前 HTML 文檔并使用 CSS 將其隱藏以防止閃爍。
- 使用InputElement.select()選擇<input>元素的內容。
- 使用Document.execCommand('copy') 將 <input>的內容復制到剪貼板。
- 從文檔中刪除<input>元素。
Javascript 代碼:
const copyToClipboard = str => {
const el = document.createElement('input');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
document.execCommand - Web API 接口參考 | MDN
如果要實現其它高級功能,可以使用現代瀏覽器的 Clipboard - Web API 接口參考 | MDN
使用
navigator.clipboard.writeText 寫入文本至操作系統剪貼板
const copyToClipboard = str => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
return navigator.clipboard.writeText(str);
return Promise.reject('The Clipboard API is not available.');
};