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

Question

我正在尝试编写一个简单的脚本，让用户将页面的当前 url 复制到剪贴板。我的问题是，如果将任何其他文本复制到剪贴板，即用户使用 Ctrl+C/Ctrl+V 突出显示页面上的某些文本，则初始文本(页面 url)会消失/被最后复制的内容替换。

这是我的代码

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") 调用成功:

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

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