oncopy event not fired in leaflet

Question

I want to catch the copy event that is fired when the user presses Ctrl+C . For some reasons it is not fired when the user interacts with the map. I've tried to automatically set the focus on the #map div, but it didn't help.

Here is a working example of a div that gets the oncopy event http://jsfiddle.net/669a62dn/ document.getElementById('map').addEventListener('copy', function (e) { console.log(e); });

And here's a map that doesn't work: http://jsfiddle.net/b4ueu63f/

Any help is appreciated. Thanks!

When clicking around the map and then clicking again in the map it seems to work... but inspecting the console I am targeting the `+` — nobe4, Jun 24 '15 at 09:02

Daniel Causebrook · Answer 1 · 2015-06-24T09:13:21.670

You say "[The copy event] is not fired when the user interacts with the map." However, it works for me. If I select the Leaflet | © OpenStreetMap contributors text at the base of the map and press Ctrl-C, an event is fired.

Possibly when you were testing, you did not select anything to copy, and consequently, when you tried to copy, nothing happened because nothing was selected.

I think the problem here may be that the map itself cannot be selected and therefore cannot be copied, only the text in the map div can. This means the copy event handler may not be behaving as you expect.

score 0 · Answer 2 · answered Jun 24 '15 at 09:14

It seems you can't trigger the copy event on the map iteslf.

But you could trick the map like this :

Add an input that will contain the desired data to be copied.
On click on the map : add the data to the input and focus on it.
You can then use the copy event on this element.

Example : http://jsfiddle.net/j381ybe1/

The only change is the copy event is triggered on the input element and when you click on the map you insert some text on the input.

score 0 · Accepted Answer · edited May 23 '17 at 12:22

I found a solution here but had some trouble translating the coffee script in js mainly because I'm new to this. 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();

It worked in the end. Thanks for the answers

score -1 · Answer 4 · answered Jun 24 '15 at 09:00

It works for input elements.
Look, I forked the jsBin

http://jsfiddle.net/tb0ek6q4/

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

script

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

But what do you mean with ' the client copies id="map" '?

oncopy event not fired in leaflet

4 Answers4