html 将当前URL复制到剪贴板

aij0ehis  于 2022-12-09  发布在  其他
关注(0)|答案(5)|浏览(246)

不知道为什么这对我来说是如此困难,但由于某些原因,我似乎不能让它复制当前的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库),也不使用某种隐藏的文本字段。

6jjcrrmo

6jjcrrmo1#

可以创建临时DOM元素来保存URL

不幸的是,剪贴板操作没有标准的API,所以我们只能使用HTML input元素来满足我们的需要。其思想是创建一个输入,将其值设置为当前文档的URL,选择其内容并执行copy
然后,我们清理混乱,而不是将输入设置为隐藏并污染DOM。

var dummy = document.createElement('input'),
    text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);
aelbi1ox

aelbi1ox2#

2021年更新:您可以像这样使用Clipboard API

navigator.clipboard.writeText(window.location.href);
vd2z7a6w

vd2z7a6w3#

ppajer的答案确实是浏览器处理复制时所需要的全部,而不涉及任何剪贴板事件的自定义处理。
但是如果你或者某个库挂钩到copy事件(比如window.addEventListener('copy', ...)),然后如果那个处理程序依赖于使用window.getSelection(),那么a 19 year old Firefox问题就会咬你一口。
值得注意的是,目前getSelection()不适用于Firefox、Edge(传统版)和Internet Explorer中的<textarea><input>元素的内容。
因此,getSelection()HTMLInputElement#select之后返回一个非空结果,但不提供实际选择的内容。

function copyUrl() {
  if (!window.getSelection) {
    alert('Please copy the URL from the location bar.');
    return;
  }
  const dummy = document.createElement('p');
  dummy.textContent = window.location.href;
  document.body.appendChild(dummy);

  const range = document.createRange();
  range.setStartBefore(dummy);
  range.setEndAfter(dummy);

  const selection = window.getSelection();
  // First clear, in case the user already selected some other text
  selection.removeAllRanges();
  selection.addRange(range);

  document.execCommand('copy');
  document.body.removeChild(dummy);
}

(The当没有自定义处理程序挂钩到copy事件时,上述的也将起作用。)

yzxexxkh

yzxexxkh4#

这可能是最简单的方法之一

window.navigator.clipboard.writeText(textToCopy);
omvjsjqw

omvjsjqw5#

var $temp = $("<input>");
var $url = $('.copy').attr('href');

  $('.clipboard').on('click', function() {
    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
        
      Toast.fire({
        icon: 'success',
        title: 'URL copied! ' 
      })
          
})

相关问题