Javascript Can'；无法访问复制到剪贴板的文本

我正在尝试编写一个简单的脚本，让用户将页面的当前url复制到剪贴板。我的问题是，如果将任何其他文本复制到剪贴板，即用户使用Ctrl+C/Ctrl+V高亮显示页面上的某些文本，则初始文本（页面url）将消失/替换为上次复制的文本

这是我的密码

HTML

---

您遇到的问题是浏览器如何将写入剪贴板视为用户故意做的事情。要使

execCommand（“copy”）

调用成功，必须满足两个条件：

execCommand（“copy”）

必须从用户触发的事件中调用，您正在执行此操作。该函数是从click事件处理程序中调用的，因此在那里一切正常

从中复制的元素必须能够被用户交互。目前，您的CSS正在隐藏该元素，因此现代浏览器（可能还有旧浏览器）将不允许将内容写入剪贴板，因为用户无法合理地从隐藏字段复制文本

---

如果删除文本区域上的

显示：无

，则文本应成功复制到剪贴板。应用于textarea的属性足以使输入从浏览器验证角度在技术上可见，同时在执行操作时不会在用户眼中闪烁

您遇到的问题是浏览器如何将写入剪贴板视为用户故意做的事情。要使

execCommand（“copy”）

调用成功，必须满足两个条件：

execCommand（“copy”）

必须从用户触发的事件中调用，您正在执行此操作。该函数是从click事件处理程序中调用的，因此在那里一切正常

从中复制的元素必须能够被用户交互。目前，您的CSS正在隐藏该元素，因此现代浏览器（可能还有旧浏览器）将不允许将内容写入剪贴板，因为用户无法合理地从隐藏字段复制文本

---

如果删除文本区域上的

显示：无

，则文本应成功复制到剪贴板。应用于textarea的属性足以使输入从浏览器验证角度在技术上可见，同时在执行操作时不会在用户眼中闪烁

非常感谢您的详细回复。修改代码后，我遇到的另一个问题是，在IE/Edge上，无论

事件如何，浏览器似乎都会跳到页面底部。preventDefault（）

。添加

top:'0px'

似乎已经解决了这个问题。非常感谢您的详细回复。修改代码后，我遇到的另一个问题是，在IE/Edge上，无论

事件如何，浏览器似乎都会跳到页面底部。preventDefault（）

。添加

top:'0px'

似乎已经解决了这个问题。

<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>

$('#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();
})

textarea{
 display: none;
}