JavaScript`document.execCommand（'copy'）`看起来成功（返回`true`），但不向剪贴板写任何东西

Question

我试图在用户点击按钮时将隐藏元素的文本值复制到用户剪贴板。

我正在使用ES6，使用Webpack和Grunt处理。

这些是我用来参考的文章：

MDN: Interact with the clipboard

我正在使用// overlay center point GeoPoint overlayCenterPoint = new GeoPoint(50.450667, 30.523193); IMapController mapController = mMapView.getController(); mapController.setZoom(17f); mapController.setCenter(overlayCenterPoint); mMapView.setMapOrientation(0.0f); GroundOverlay myGroundOverlay = new GroundOverlay(); myGroundOverlay.setPosition(overlayCenterPoint); Drawable d = ResourcesCompat.getDrawable(getResources(), R.drawable.ic_launcher, null); myGroundOverlay.setImage(d.mutate()); // overlay width in meters (height calculated automatically) also you can set both width and height myGroundOverlay.setDimensions(200.0f); myGroundOverlay.setTransparency(0.25f); myGroundOverlay.setBearing(0); mMapView.getOverlays().add(myGroundOverlay); 。我还不知道这个方法有任何浏览器兼容性问题。

以下是相关标记：

document.execCommand('copy')

这是相关的JavaScript：

<div class="icon-link">
  <a href="">
    <svg id="copy_button" ... /></svg>
  </a>

  <p id="copy_confirm">Copy Link</p>
</div>

...

<p id="copy_text" style="display:none;">[text content to copy]</p>

当我单击按钮时，我在控制台中看到“成功”消息。我可以通过在控制台中手动运行此代码进行验证，选择元素并执行const copyBtn = document.getElementById('copy_button'); const copyText = document.getElementById('copy_text'); const copyLink = (e) => { e.preventDefault(); const range = document.createRange(); range.selectNode(copyText); window.getSelection().addRange(range); try { const successful = document.execCommand('copy'); const msg = successful ? 'successful' : 'unsuccessful'; global.console.log(`Copy command was ${msg}`); } catch (err) { global.console.log('Oops, unable to copy'); } window.getSelection().removeAllRanges(); }; doc.addEventListener('DOMContentLoaded', () => { copyBtn.addEventListener('click', copyLink); }); 返回document.execCommand('copy')。

但我的剪贴板内容没有改变。

我已经确认该页面正在隐藏元素中使用正确的文本值进行渲染。

我尝试将标记的结构更改为不同的元素类型，并使用样式来显示元素而不是隐藏它;这些没有效果。

我尝试过使用上述MDN文章中的true方法和Google文章中基于Element.select()的方法（此处显示）;两者都表现出相同的行为。

我已经看到了一些关于使用Range的其他问题，但是所有这些问题似乎都处理了与返回document.execCommand()的函数相关的问题。我没有发现任何解决我所看到的行为的问题。

我在最近的Chrome和Firefox中测试过。

你能帮我理解为什么我的剪贴板内容没有改变吗？

Answer 1

我今天必须尝试一些与以前尝试从可见区域复制的东西不同的东西;问题现在已经解决了。

这是我使用的标记：

<div class="icon-link copy-link">
  <a href="">
    <svg id="copy_button" ... /></svg>
  </a>

  <p id="copy_confirm">Copy Link</p>
</div>

<input id="copy_text" type="text" value="[text content to copy]"/>

似乎在JavaScript中，Element.select()或range.selectNode()方法都可以正常运行。我从上面保持不变。

对于任何好奇的人，我现在隐藏<input>元素transform: translateX();和非常大的负值。