oncopy事件未在传单中触发

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!

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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" '?