传单中未触发 oncopy 事件

Question

我想捕捉当用户按下 Ctrl+C 时触发的复制事件。由于某些原因，当用户与地图交互时它不会被触发。我试过自动将焦点设置在 #map div 上，但没有用。

这是获取 oncopy 事件的 div 的工作示例 http://jsfiddle.net/669a62dn/ document.getElementById('map').addEventListener('copy', function (e) { console.log(e); });

这是一张不起作用的地图：http://jsfiddle.net/b4ueu63f/

感谢任何帮助。谢谢！

Answer 1

它适用于输入元素。
看，我分叉了 jsBin

http://jsfiddle.net/tb0ek6q4/

<input id='clipboard' value="HELLO WORLD!">
<div id="log"></div>

脚本

document.getElementById('clipboard').addEventListener('copy', function (e) {
  document.getElementById('log').innerHTML += e;
});

但是“客户端复制 id="map"”是什么意思？

Answer 2

您说“当用户与地图交互时不会触发[复制事件]。” 但是，它对我有用。如果我 select 地图底部的 Leaflet | © OpenStreetMap contributors 文本并按 Ctrl-C，将触发一个事件。

可能在测试时，您没有 select 复制任何东西，因此，当您尝试复制时，没有任何反应，因为什么都没有 selected。

我认为这里的问题可能是地图本身无法select编辑，因此无法复制，只有地图中的文字div可以。这意味着复制事件处理程序的行为可能与您预期的不同。

Answer 3

您似乎无法在地图上触发 copy 事件。

但是你可以像这样欺骗地图：

添加将包含要复制的所需数据的输入。
点击地图：将数据添加到输入并关注它。
然后您可以在此元素上使用 copy 事件。

示例：http://jsfiddle.net/j381ybe1/

唯一的变化是 copy 事件在 input 元素上触发，当您单击地图时，您会在输入中插入一些文本。

Answer 4

我在这里找到了解决方案，但在用 js 翻译咖啡脚本时遇到了一些问题，主要是因为我是新手。 How does Trello access the user's clipboard?

var clipboardCont = L.DomUtil.get('clipboard-container');
L.DomUtil.setStyle(clipboardCont, 'display', 'inline');
var textArea = L.DomUtil.get('clipboard');
textArea.focus();
textArea.select();

最后成功了。感谢您的回答

传单中未触发 oncopy 事件

oncopy event not fired in leaflet

html

javascript

css

jquery

leaflet