不知道为什么这对我来说是如此困难,但由于某些原因,我似乎不能让它复制当前的URL到剪贴板.总的来说,我正在寻找一种方法来做到这一点 * 而不 * 需要创建一些隐藏的文本元素.
这是我目前正在尝试的:
var shareBtn = document.querySelector(".share-button");
shareBtn.addEventListener('click', function(event) {
var cpLink = window.location.href;
cpLink.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
event.preventDefault;
});
当我尝试使用.select()
来执行时,我得到以下错误:t.select is not a function
所以我不能100%确定什么是最好的方法。同样,不使用jQuery(或任何其他JS库),也不使用某种隐藏的文本字段。
5条答案
按热度按时间6jjcrrmo1#
可以创建临时DOM元素来保存URL
不幸的是,剪贴板操作没有标准的API,所以我们只能使用HTML
input
元素来满足我们的需要。其思想是创建一个输入,将其值设置为当前文档的URL,选择其内容并执行copy
。然后,我们清理混乱,而不是将输入设置为隐藏并污染DOM。
aelbi1ox2#
2021年更新:您可以像这样使用Clipboard API:
vd2z7a6w3#
ppajer的答案确实是浏览器处理复制时所需要的全部,而不涉及任何剪贴板事件的自定义处理。
但是如果你或者某个库挂钩到copy事件(比如
window.addEventListener('copy', ...)
),然后如果那个处理程序依赖于使用window.getSelection()
,那么a 19 year old Firefox问题就会咬你一口。值得注意的是,目前
getSelection()
不适用于Firefox、Edge(传统版)和Internet Explorer中的<textarea>
和<input>
元素的内容。因此,
getSelection()
在HTMLInputElement#select
之后返回一个非空结果,但不提供实际选择的内容。(The当没有自定义处理程序挂钩到copy事件时,上述的也将起作用。)
yzxexxkh4#
这可能是最简单的方法之一
omvjsjqw5#