WebGL Copy - Paste for Input Field not working

Hi there,

I am using Unity 2017.1.0p4 with TextMesh Pro from the Asset Store in WebGL.
I am facing an issue with Copy - Paste. I am not able to copy something from outside the WebGL window inside an Input Field but it works if I copy something from Unity and past it inside the input.

After a fast test here are the results.

In Editor

  • UI InputField - Outside to Unity and Unity to Unity : OK
  • TextMeshPro Input FIield - Outside to Unity and Unity to Unity : OK

WebGL

  • UI InputField - Outside to Unity : FAIL
  • TextMeshPro Input FIield - Outside to Unity : FAIL
  • UI InputField - Unity to Unity : OK

  • TextMeshPro Input FIield - Unity to Unity : OK

It seems that it's more related to Unity itself than TextMesh Pro, does anybody have any idea about where does this comes from and if there's a way to fix this ?

Thanks a lot !

See https://forum.unity3d.com/threads/copy-paste-has-anyone-built-a-good-solution-for-this.401851/#post-2672497 as to why it is that way.

We said we'd find a solution back then but there is none yet and currently none planned either. Sorry for that.

Alright. Thanks for the answer @Schubkraft .

@Schubkraft @MaT227 there is a solution, it works with firefox, should work with the others.

2 Likes

Here is a simple solution in two steps:

  • create javascript library with function that calls javasript "prompt" window in which user can paste from clipboard.
  • use "SendMessage" to send user's input from javascript to your Unity method.

To do this first create file with extention .jslib and put it in Assets\Plugins folder in your project. Here is example code of this file:

mergeInto(LibraryManager.library, {


  PasteHereWindow: function (sometext) {
    var pastedtext= prompt("Please paste here:", "placeholder");
    SendMessage("CopyPasteObject", "GetPastedText", pastedtext);
  },

});

Then in your scene create object with script that will activate javascript and then receive outcome (actually receiver can be different object and method than activator). In "SendMessage" you put name of obcject on your scene, method that is in any of scripts attached to this object and then the value (here string but can be other).

This is example script for object called "CopyPasteObject":

using UnityEngine;
using System.Runtime.InteropServices;

public class CopyPasteObjectScript : MonoBehaviour {

    [DllImport("__Internal")]
    private static extern void PasteHereWindow(string gettext);

    string sometext = " xxxxxx ";

    private void OnGUI()
    {
        if(GUI.Button(new Rect(100, 100, 200, 50), "Press me, so you can paste text"))
        {
            PasteHereWindow("xxxx");
        }
        GUI.Label(new Rect(50, 50, 300, 50), "Your pasted text is: ");
        GUI.Label(new Rect(150, 50, 300, 50), sometext);
    }

    public void GetPastedText(string newpastedtext)
    {
        sometext = newpastedtext;
    }
}

You may receive some errors in Editor but it shold be fine when you Build and Run project.

6 Likes

Tested it and it works for me, tyvm for sharing this code :slight_smile:

1 Like

This should be included in Unity’s WebGL templates or something

1 Like

i have maked a plugins for Unity WebGL IME input.
https://github.com/kou-yeung/WebGLInput
this can copy and paste

14 Likes

CopyPaste.jslib

var CopyPastePlugin =
{
  CopyPasteReader: function(gObj, vName)
  {
      var gameObjectName = UTF8ToString(gObj);
      var voidName = UTF8ToString(vName);
      navigator.clipboard.readText().then(function(data) {
        gameInstance.SendMessage(gameObjectName, voidName, data);
      }, function() {
        gameInstance.SendMessage(gameObjectName, voidName, "no text aviable in clipboard");
      })
  }
};
mergeInto(LibraryManager.library, CopyPastePlugin);

in your code:

[DllImport("__Internal")]
public static extern void CopyPasteReader(string gObj, string vName);

//........

void Update()
{
    if (Input.GetKeyDown(KeyCode.V) && (Input.GetKey(KeyCode.LeftControl) || Input.GetKey(KeyCode.RightControl)))
    {
        CopyPasteReader("MYGAMEOBJECTNAME", "Paste");
    }
}

private void Paste(string pasteValue)
{
    Debug.Log(pasteValue);
}

Browser support, see here: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText

Edit:
It works only with https:// !!!
Tested with Chrome, Firefox, Edge Opera and Safari.
It works with Chrom and Opera. It does NOT work with Edge, Firefox and Safari ! (pearhaps someone else have a solution for this -> unknow funktion readText())
online demo: https://standeditor.expoformer.ch/static/wp/copypaste/

1 Like

Well, it seems navigator.clipboard.readText() is only aviable in Chrome and Opera yet.
pearhaps i'ts a new feature and we have to wait.

Kou-Yeung’s solution works great without need for a paste clipboard. Simply add the WebGLSupport files to your assets and attach the script onto required inputfields. Nice job!

1 Like

Hello, i tried your package, it works for me only when the browser canvas is not in fullscreen mode. When in fullscreen mode it doesnt work,. Debugging shows that the text box no longer gets the focus, and no more messages when im typing into the text box. This happens once i click the zoom button below the game canvas on the browser.

Before i click the zoom button everything works, i can type, copy, paste, everything, once i hit that zoom button everything stops working, any ideas what can cause that? Even if i come out of zoom it still dont work anymore.

i did the same thing with your project and everything works even in zoom mode, i dont know whats wrong with mine!

thank you for report.
i was comment in github issues.and have a workaround for fullscreen.

https://github.com/kou-yeung/WebGLInput/issues/2
i will make it more simply…

1 Like

Thanks so much, it worked, god bless!

So this is a bit annoying (not the first major webgl unity issue hit)

I will look at these solutions to allow pasting, but [again] could Unity please add built-in solutions?! @Schubkraft .

I don't think @kou-yeung 's solution will work for me, because I don't have a standard Input field (I have a code editor; see https://miniscript.org/demo/ and click the Program button at the top).

And @sumpfkraut 's solution still doesn't work in the latest Firefox... I can't leave Firefox out; it's a major browser (and the one I happen to prefer).

Note that copy/paste works within my WebGL app just fine... it's just that it can't exchange data with the system clipboard, and that makes it almost useless.

Are there any other routes to explore?

I looked at your demo, im sure his copy/paste can work on your command line, isnt it a regular UI Input field?

No, I'm talking about the code editor. It is not a UI input field.

Maybe add a PASTE button, when user wants to paste they click that button, then you display a dialog box with a regular UI INPUT so they can paste into that using his method, then your code copies text from that into your custom code input.

1 Like

from Firefox 63
Firefox only supports reading the clipboard in browser extensions, using the “clipboardRead” extension permission.

so,you can try the “Permissions API” to request permissions to use
navigator.clipboard.readText()

FYR:
“Permissions API”
https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API

see the detail of readText and writeText
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText#Browser_compatibility

*i will take a time to try it.

1 Like