Question

我正在尝试编写一个简单的脚本，使用户可以将页面的当前URL复制到剪贴板。我的问题是，如果将任何其他文本复制到剪贴板，即用户通过使用Ctrl + C / Ctrl + V突出显示页面上的某些文本，则初始文本（页面url）消失/由上一次复制的内容代替。 / p>

这是我的代码

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")必须从用户触发的事件中调用，您正在执行此事件。该函数是在click事件处理程序中调用的，因此一切正常。
要复制的元素必须能够与用户进行交互。当前，您的CSS隐藏了该元素，因此现代浏览器（可能还有较旧的浏览器）将不允许将内容写入剪贴板，因为用户无法合理地从隐藏字段复制文本。

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

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

1 个答案: