Search Unity

  1. We would like to hear your feedback about Unity and our products. Click here for more information.
    Dismiss Notice

WebGL Copy - Paste for Input Field not working

Discussion in 'WebGL' started by MaT227, Sep 11, 2017.

  1. MaT227

    MaT227

    Joined:
    Jul 3, 2012
    Posts:
    614
    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 !
     
  2. Schubkraft

    Schubkraft

    Unity Technologies

    Joined:
    Dec 3, 2012
    Posts:
    882
  3. MaT227

    MaT227

    Joined:
    Jul 3, 2012
    Posts:
    614
  4. elhongo

    elhongo

    Joined:
    Aug 13, 2015
    Posts:
    25
  5. Deacon2099

    Deacon2099

    Joined:
    Nov 23, 2015
    Posts:
    3
    Here is a simple solution in two steps:
    1. create javascript library with function that calls javasript "prompt" window in which user can paste from clipboard.
    2. 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:
    Code (JavaScript):
    1. mergeInto(LibraryManager.library, {
    2.  
    3.  
    4.   PasteHereWindow: function (sometext) {
    5.     var pastedtext= prompt("Please paste here:", "placeholder");
    6.     SendMessage("CopyPasteObject", "GetPastedText", pastedtext);
    7.   },
    8.  
    9. });
    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":
    Code (CSharp):
    1. using UnityEngine;
    2. using System.Runtime.InteropServices;
    3.  
    4. public class CopyPasteObjectScript : MonoBehaviour {
    5.  
    6.     [DllImport("__Internal")]
    7.     private static extern void PasteHereWindow(string gettext);
    8.  
    9.     string sometext = " xxxxxx ";
    10.  
    11.     private void OnGUI()
    12.     {
    13.         if(GUI.Button(new Rect(100, 100, 200, 50), "Press me, so you can paste text"))
    14.         {
    15.             PasteHereWindow("xxxx");
    16.         }
    17.         GUI.Label(new Rect(50, 50, 300, 50), "Your pasted text is: ");
    18.         GUI.Label(new Rect(150, 50, 300, 50), sometext);
    19.     }
    20.  
    21.     public void GetPastedText(string newpastedtext)
    22.     {
    23.         sometext = newpastedtext;
    24.     }
    25. }
    26.  
    You may receive some errors in Editor but it shold be fine when you Build and Run project.
     
    ina, Anh-Pham, savely00 and 1 other person like this.
  6. DerDrache

    DerDrache

    Joined:
    Aug 1, 2018
    Posts:
    1
    Tested it and it works for me, tyvm for sharing this code :)
     
  7. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    780
    This should be included in Unity's WebGL templates or something

     
  8. kou-yeung

    kou-yeung

    Joined:
    Sep 5, 2016
    Posts:
    12
    rpantaev and roka like this.
  9. sumpfkraut

    sumpfkraut

    Joined:
    Jan 18, 2013
    Posts:
    133
    CopyPaste.jslib
    Code (JavaScript):
    1. var CopyPastePlugin =
    2. {
    3.   CopyPasteReader: function(gObj, vName)
    4.   {
    5.       var gameObjectName = UTF8ToString(gObj);
    6.       var voidName = UTF8ToString(vName);
    7.       navigator.clipboard.readText().then(function(data) {
    8.         gameInstance.SendMessage(gameObjectName, voidName, data);
    9.       }, function() {
    10.         gameInstance.SendMessage(gameObjectName, voidName, "no text aviable in clipboard");
    11.       })
    12.   }
    13. };
    14. mergeInto(LibraryManager.library, CopyPastePlugin);

    in your code:
    Code (CSharp):
    1. [DllImport("__Internal")]
    2. public static extern void CopyPasteReader(string gObj, string vName);
    3.  
    4. //........
    5.  
    6. void Update()
    7. {
    8.     if (Input.GetKeyDown(KeyCode.V) && (Input.GetKey(KeyCode.LeftControl) || Input.GetKey(KeyCode.RightControl)))
    9.     {
    10.         CopyPasteReader("MYGAMEOBJECTNAME", "Paste");
    11.     }
    12. }
    13.  
    14. private void Paste(string pasteValue)
    15. {
    16.     Debug.Log(pasteValue);
    17. }
    18.  
    19.  
    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/
     
    Last edited: Apr 10, 2019
  10. sumpfkraut

    sumpfkraut

    Joined:
    Jan 18, 2013
    Posts:
    133
    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.
     
  11. rpantaev

    rpantaev

    Joined:
    Oct 27, 2017
    Posts:
    4
    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!
     
  12. nsmith1024

    nsmith1024

    Joined:
    Mar 18, 2014
    Posts:
    586
    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!
     
  13. kou-yeung

    kou-yeung

    Joined:
    Sep 5, 2016
    Posts:
    12
    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...
     
  14. nsmith1024

    nsmith1024

    Joined:
    Mar 18, 2014
    Posts:
    586
  15. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    1,049
    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.
     
  16. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    7,910
    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?
     
  17. nsmith1024

    nsmith1024

    Joined:
    Mar 18, 2014
    Posts:
    586
    I looked at your demo, im sure his copy/paste can work on your command line, isnt it a regular UI Input field?
     
  18. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    7,910
    No, I'm talking about the code editor. It is not a UI input field.
     
  19. nsmith1024

    nsmith1024

    Joined:
    Mar 18, 2014
    Posts:
    586
    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.
     
    JoeStrout likes this.
  20. kou-yeung

    kou-yeung

    Joined:
    Sep 5, 2016
    Posts:
    12
    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.
     
    Last edited: Jun 18, 2019
  21. sumpfkraut

    sumpfkraut

    Joined:
    Jan 18, 2013
    Posts:
    133
    This works with Chrome, Firefox, and Opera:
    Code (JavaScript):
    1. var CopyPastePlugin =
    2. {
    3.   CopyPasteReader: function(gObj, vName)
    4.   {
    5.       var gameObjectName = UTF8ToString(gObj);
    6.       var voidName = UTF8ToString(vName);
    7.       function getCpText( e )
    8.       {
    9.           e.preventDefault();
    10.           var pastedText = undefined;
    11.           if( window.clipboardData && window.clipboardData.getData )
    12.           {
    13.               pastedText = window.clipboardData.getData('Text');
    14.           }
    15.           else if( e.clipboardData && e.clipboardData.getData )
    16.           {
    17.               pastedText = e.clipboardData.getData('text/plain');
    18.           }
    19.           unityInstance.SendMessage(gameObjectName, voidName, pastedText);
    20.       }
    21.       if( navigator.userAgent.indexOf("Firefox") != -1 )
    22.       {
    23.           document.onpaste = getCpText;
    24.       }
    25.       else if( navigator.userAgent.indexOf("Edge") != -1 )
    26.       {
    27.           unityInstance.SendMessage(gameObjectName, voidName, "this browser is not supported.");
    28.       }
    29.       else if( navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Opera") != -1 )
    30.       {
    31.           navigator.clipboard.readText().then(function(data) {
    32.               unityInstance.SendMessage(gameObjectName, voidName, data);
    33.           }, function() {
    34.               unityInstance.SendMessage(gameObjectName, voidName, "no text aviable in clipboard");
    35.           })
    36.       }
    37.       else if( navigator.userAgent.indexOf("Safari") != -1 )
    38.       {
    39.           unityInstance.SendMessage(gameObjectName, voidName, "this browser is not supported.");
    40.       }
    41.       else
    42.       {
    43.           unityInstance.SendMessage(gameObjectName, voidName, "this browser is not supported.");
    44.       }
    45.   }
    46. };
    47. mergeInto(LibraryManager.library, CopyPastePlugin);
    For any reason (in Firefox) the first time you press Ctrl+V nothing happen. But then it works.
    Someone have a idea to fix this?
    Online Demo here: https://standeditor.expoformer.ch/static/wp/copypaste3/
     
    Last edited: Jun 18, 2019
  22. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    7,910
    Hmm, for me (in your demo) it doesn't work no matter how times I try. When I press cmd-V, the Edit menu highlights briefly, but no text appears. Using Firefox 67.0.2 (67-bit) on Mac.
     
  23. sumpfkraut

    sumpfkraut

    Joined:
    Jan 18, 2013
    Posts:
    133
    Firefox 67.0.3 on windows works.
    Tested on different computers.