无法访问复制到剪贴板的文本

Question

我正在尝试编写一个简单的脚本，让用户可以将页面的当前 url 复制到剪贴板。我的问题是，如果任何其他文本被复制到剪贴板，即用户使用 Ctrl+C / Ctrl+V 突出显示页面上的某些文本，则初始文本（页面 url）disappears/is 替换为最后复制了什么。

这是我的代码

HTML

<ul class="list-inline">
 <li class="list-inline">....</li>
 <li class="list-inline">....</li>
 <li class="list-inline-item"><a class="btn btn-default" href="#" title="Copy link to Clipboard" id="copyURL"><i class="fas fa-link"></i> <span id="copyURLText">Copy URL</span></a></li>
</ul>

jQuery

$('#copyURL').click(function(event){
  event.preventDefault();

  //temporarily change text in link span
  $('#copyURLText').text('Copied');

  setTimeout(function(){
   $('#copyURLText').text('Copy URL');
  }, 1500);

  //create text area and input value
  var tempContainer = $('<textarea></textarea>');
  tempContainer.val(window.location.href.replace(/\#/gi, ''));

  //set attributes and position outside the screen
  tempContainer.attr('readonly', true);
  tempContainer.css({
   'position': 'absolute',
   'left': '-9999px',
   'top': '0px'
  })

  //append to body
  $('body').append(tempContainer);

  //select element, copy text then remove
  tempContainer.select();
  document.execCommand('copy');
  tempContainer.remove();
})

CSS

textarea{
 display: none;
}

Answer 1

您遇到的问题与浏览器如何将写入剪贴板视为用户故意进行的操作有关。必须满足两个条件才能使 execCommand("copy") 调用成功：

execCommand("copy") 必须从您正在执行的用户触发事件中调用。该函数是从单击事件处理程序中调用的，所以一切都很好。
要从中复制的元素必须能够与用户进行交互。目前，您的 CSS 正在隐藏该元素，因此现代浏览器（也可能是较旧的浏览器）不允许将内容写入剪贴板，因为用户无法合理地从隐藏字段中复制文本。

如果删除文本区域中的 display:none，文本应该会成功复制到剪贴板。您应用于文本区域的属性足以使输入 技术上 从浏览器验证的角度看是可见的，同时在您执行操作时不会在用户眼中闪烁。

无法访问复制到剪贴板的文本

Can't access text copied to clipboard

javascript

clipboard

jquery