Copy / Paste - has anyone built a good solution for this?

Copy / Paste doesn't work into or out of a Unity (and NGUI) WebGL game. As far as I can tell this is a JS issue by (security) design.

One of the top results for this issue on google points to a closed bug : https://issuetracker.unity3d.com/is...s-not-support-copy-slash-paste-on-webgl-build which incorrectly claims it's 'fixed'

It sounds like from various other snippets and hints from Unity staff in the forums like it *should* be possible to make this work by some combination of special keyboard access mode and having a hidden text field on the page. Has anyone actually done this successfully? Or have some other working method for copying/pasting text into/out of Unity? I'm looking for a working example implementation. Thanks!

 

Hey Alex, thanks for the reply. Great to hear that this might actually get fixed so hacks aren't needed.

In the short term are you aware of any solution out there that can make this work? I found this post : http://forum.unity3d.com/threads/webgl-and-html-overlay.398283/#post-2599929 which looks like it creates an overlay whos contents are then forwarded to Unity - any improvement over that concept?

 

Example clean code would be much appreciated!

The specific use-case I'm trying to solve for is that I generate some text in my game and want the player to be able to copy that. I also then want the player to be able to paste it back into the game.

 

Ok so I worked out how to get an overlay solution working. The way this works is to add a div on top of the unity game canvas that contains a textarea and two buttons (cancel overlay and import text). It's (really) ugly but it works

Spoiler: JS plugin (save as ImportExportPlugin.jslib in Plugins/WebGL)

Code (JavaScript):

1. var ImportExportPlugin = {
2.     ShowOverlay: function(stringPointer)
3.     {
4.  
5.       if (!document.getElementById('inputOverlay')) {
6.         var myoverlay = document.createElement('div');
7.         myoverlay.setAttribute('id', 'inputOverlay');
8.         document.body.appendChild(myoverlay);          
9.         document.getElementById('inputOverlay').innerHTML = "<textarea id='saveGameInput'></textarea><br><button onClick='SendMessage(\"Import Export Panel(Clone)\",\"ImportFromWebOverlay\",document.getElementById(\"saveGameInput\").value)'>Import</button><button onClick='SendMessage(\"Import Export Panel(Clone)\",\"CloseOverlay\",\"\")'>Cancel</button>";
10.       }
11.      
12.       var exported = Pointer_stringify(stringPointer);
13.       document.getElementById('saveGameInput').value = exported;
14.       document.getElementById('inputOverlay').setAttribute('style','display:block;');
15.       document.getElementById('inputOverlay').focus();
16.     },
17.     HideOverlay: function()
18.     {
19.         document.getElementById('inputOverlay').setAttribute('style','display:none;');
20.     }
21. };
22. mergeInto(LibraryManager.library, ImportExportPlugin);

Spoiler: C# code to add plugin functions and call them with content

Code (CSharp):

1.     [DllImport("__Internal")]
2.     private static extern void ShowOverlay(string exportedGameSave);
3.  
4.     [DllImport("__Internal")]
5.     private static extern void HideOverlay();
6.  
7.     void ShowImportExportOverlay (string gameSave) {
8.         ShowOverlay(gameSave);
9.         ToggleCaptureAllInput(false);
10.     }
11.  
12.     public void ImportFromWebOverlay(string importStr){
13.         HideOverlay();
14.         LoadGameFromImportedString(importStr);
15.         ToggleCaptureAllInput(true);
16.     }
17.  
18.     public void CloseOverlay(string param){
19.         HideOverlay();
20.         ToggleCaptureAllInput(true);
21.     }
22.  
23.     void ToggleCaptureAllInput(bool captureAll){
24.         #if !UNITY_EDITOR && UNITY_WEBGL
25.         WebGLInput.captureAllKeyboardInput = captureAll;
26.         #endif
27.     }

Spoiler: CSS for overlay elements (add to your custom WebGL template)

Code (JavaScript):

1. button {
2.     background-color: white;
3.     border: none;
4.     color: black;
5.     padding: 10px;
6.     margin: 10px;
7.     text-align: center;
8.     text-decoration: none;
9.     display: inline-block;
10.     font-size: 16px;
11. }
12.  
13. div#inputOverlay{
14.   text-align:center;
15.   margin:0;
16.   padding:10px;
17.   width:100%;
18.   height:100%;
19.   background-color: purple;
20.   z-index: 1;
21.   position: fixed;
22. }
23.  
24. textArea{
25.   width:600px;
26.   height:200px;
27.   padding:5px;
28.   margin:10px;
29. }

This was adapted from http://forum.unity3d.com/threads/webgl-and-html-overlay.398283/#post-2599929, for my specific use-case I needed to import / export an encrypted save game string.

 

Is this on Unity's plans to fix; or is it likely to stay broken for the medium/long-term?

 

This is good news

 

Could you give us an update about the status of this?

 

Hi alexsuvorov

It's good to hear that people are working on this. It certainly seems like an important feature. We are currently looking for the paste functionality - and I don't seem to be able to persuade our UI designer that a javascript text box is a good idea...

So, any news if this will make it into Unity 5.5? .. I just tried the 5.5.0b3 and I could not paste text in both Windows and OS X.

 

Hi there! any updates?

 

hey any update here?

 

You have to write Javascript code (outside of Unity that Unity calls), that pops up a little dialog with an edit box, have the user past into that, then send that pasted string to your Unity App using messages, thats the only way I know becuase you cant do copy/paste i dont think.

 

Hey, Any update for the fix of the bug in Unity 5.5?

 

Also looking for some updates on this. document.onpaste event seems like a decent work around. Are there any example son how to use this?

 

This thread
Is dead.

 

Any update on this or any other workaround? We are developing game using c#, so i am not sure how can we use above snippet in our code? Any guidence?

 

Still no progress?

 

I'd say hold out just a little longer. Looks like there's some development for a clipboard API happening in Emscripten.

https://github.com/kripken/emscripten/issues/6377

I've had luck using newer versions of Emscripten with Unity with very few changes (No luck with their experimental threading support yet though !)

 

[Solved - bypass] one solution is within AssetStore and second, simplier is given in this thread:
https://forum.unity.com/threads/webgl-copy-paste-for-input-field-not-working.494765/

 

Unity launched an asset for Webgl copy paste.

https://assetstore.unity.com/packages/essentials/tutorial-projects/ime-input-for-unity-webgl-64933

Allows you to copy paste in Inputfield via 2 methods: Native Dialog & HTML Overlap. Html overlap is better choice.
Works fine.

 

hello everyone.
[finally solved copy / paste issues in WebGL]

Step 1 : unity side

public void CopyToClipboard()
{
string str = "Hello Word";
Application.ExternalCall("CopyToClipboard", str);
}

Step 2 : index.html file edit side
<head>
<style>
.textToCopy {
opacity: 0
}
</style>
</head>

<body>
<div class="webgl-content">
<input type='text' class='textToCopy' id="textToCopy">
</div>
</body>

function CopyToClipboard(arg){
var copyText = arg;
$('.textToCopy').val(copyText);
var textToCopy = $('.textToCopy').val();
console.log('copyText',textToCopy);
$('.textToCopy').select();
document.execCommand('copy');
}

 

Hi Chintan, I edited your code like the followig:

<script>function CopyToClipboard(arg){
var copyText = arg;
$('.textToCopy').val(copyText);
var textToCopy = $('.textToCopy').val();
console.log('copyText',textToCopy);
$('.textToCopy').select();
document.execCommand('copy');
}</script>

But still no luck. It doesn't work for me. Could you elaborate further?

 

Finally got it working by grabbing the function from another site. Used the webgl templates so the modifications are always there on export.
Use the same Unity side as above but this is how my index.html turned out.

<!DOCTYPE html>

<html lang="en-us">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Unity WebGL Player | MyProject</title>

    <link rel="shortcut icon" href="TemplateData/favicon.ico">

    <link rel="stylesheet" href="TemplateData/style.css">

    <script src="TemplateData/UnityProgress.js"></script>

    <script src="Build/UnityLoader.js"></script>

    <script>

      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Output.json", {onProgress: UnityProgress});

      function CopyToClipboard(arg){

      var tempInput = document.createElement("input");

      tempInput.value = arg;

      document.body.appendChild(tempInput);

      tempInput.select();

      document.execCommand("copy");

      document.body.removeChild(tempInput);    }

    </script>

  </head>

  <body>

    <div class="webgl-content">

    <input type='text' class='textToCopy' id="textToCopy">

      <div id="unityContainer" style="width: 1024px; height: 576px"></div>

      <div class="footer">

        <div class="webgl-logo"></div>

        <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>

        <div class="title">MyProject</div>

      </div>

    </div>

  </body>

</html>

 

Thank you so much!! It finally work in WebGL and editing its index.html!
I have tested in any PC browser, Android and iOs. However, it does not work in iOs.
Does somebody know why? It should be the same...!
@Nodrap

 

Afraid was only using it for testing on WebGL and it stretched my skill even there! As I understand it Unity discourage running WebGL in browsers on mobiles

 

I don't know if this works well but an attempt at a solution is to use the browser's copy and paste events. In paste pass that into Unity and append to the current InputField. On copy ask the inputfield to copy then pass unity's clipboard back to the browser

Here's some code and a working example

https://github.com/greggman/unity-webg-copy-and-paste

note this solution is for `UnityEngine.UI.InputField` and `TMPro.TMP_InputField`. I didn't work on supporting any other text fields

 

Thank you all very much for this - especially Nodrap for providing such an easy to crib template.
Using that, I have managed to get my WebGL deployed game to copy stuff to the clipboard. Many thanks!!

However, I have a small problem with forming line breaks in the copied text.
I am constructing the string that is to be copied to the clipboard using with a mixture of 'tab' and 'line break' markers as below (this is to create a table that can be pasted into a spreadsheet). Although the information copied on the clipboard recognizes the 'tabs' it does not correctly put the line breaks in.
Should I be using something other than '\n', perhaps?


string DataToCopy =

"A" + '\t' + varA1 + '\t' + varA2 + '\t' + varA3 + '\n'
+
"B" + '\t' + varB1 + '\t' + varB2 + '\t' + varB3;


In normal Unity, the above is copied as a nice two line, four column table.

 

@garethdenyer Could try '\r' or even a combination '\n\r' or '\r\n'

 

Thank you, Nodrap!!

 

where did you used CopyToClipboard function?

 

Just a little help for those who is still struggling.
I've made a plugin from Nodrap code. Just look an attachment.
You can simply call it using this C# code f.e.:

Code (CSharp):

1. using System;
2. using System.Runtime.InteropServices;
3. using UnityEngine;
4.  
5. namespace Rock
6. {
7.     public static class Clipboard
8.     {
9.         [DllImport("__Internal")]
10.         private static extern void CopyToClipboard(string text);
11.      
12.         public static void SetText(string text)
13.         {          
14. #if UNITY_WEBGL && UNITY_EDITOR == false
15.             CopyToClipboard(text);
16. #else
17.             GUIUtility.systemCopyBuffer = text;
18. #endif
19.         }
20.     }
21. }

 

Thank you. But it does not work across mobile browsers right? Cannot get it to copy on Safari iOS.

 

Hello @alexsuvorov, could you update us if this is a feature Unity is working on or if it has been put on hold?

 

Use an Input Field and modify the graphics so it looks as a text
Unity - Selectable UI Text - YouTube