copy to clipboard html5 alternative/workaround

On most browsers copy to clipboard is a heavily regulated security item. Only on internet explorer and perhaps Edge, you could copy to clipboard without a prompt. Otherwise you'd need flash or another plugin to do this. At least this used to be the case..

If you mean a javascript based action that copies anything to clipboard that you put in it, it would be as simple as

<action name="hotspotEvent" type="Javascript" ><![CDATA[


var message = = (args[1]); 
window.prompt("Copy to clipboard: Ctrl+C, Enter", message);


]]></action>

And then I found this.... https://clipboardjs.com/

I think I can cobble something together. Hang on, this should take a few minutes.

Unfortunately the entire library does not work with safari.. Chorme, FF, IE, opera all work.

At this point, it's a bit of an ugly hack. Allright, here we go. First of all, you need to load the library in your index.html or php file like.

<script src="./lib/clipboard.min.js"></script>

then you need to set up the clipboard by pasting this in the script section of the index.html or php

var clipboard = new Clipboard('.btn');


// init clipboard
	clipboard.on('success', function(e) {
    	console.log(e);
	});


	clipboard.on('error', function(e) {
    	console.log(e);
	});
// end init clipboard

In the HTML section you need to put these elements.. It's what gets prepped by the library. Now for the copy to work, the action that does the copying must be visible, so style.display='none' or style.visibility='hidden' will disable it due to security stuff.

<div style="position:absolute;top:-30px">
 <input id="messageContainer" type="text" value="">
 <button class="btn" id="copybutton" data-clipboard-action="copy" data-clipboard-target="#messageContainer">Copy</button>
</div>

The action code that prepares the message is this :

<action name="copyToClipboard" type="Javascript"><![CDATA[


	var message = (args[1]); 
	document.getElementById('messageContainer').value= message;
	document.getElementById('copybutton').click();


]]></action>

now if you call

copyToClipboard('this text to clipboard');

It will be copied to the clipboard, unfortunately, the only browser where it does not work is safari.. So in case of IOS or OSX, you'd need to use the prompt system

I thought I could find a use for this in my in-pano tour editor, because a lot of the people who need to add content to the tours don't use safari and do not edit on an IOS device. (although I would probably implement this completely on the javascript side of things)

But for a feature that uses this on safari and especially IOS (no flash..), It looks grim.. I'll have a look around, but it seems it's not possible.

Well, at least it has been fun playing with a bit..