kou-yeung/webglinput

IME for Unity WebGL

WebGLInput

IME for Unity WebGL ( Support TextMesh Pro from Unity2018.2 )

support “copy and paste”

support "tab" and "shift+tab" change focus to other InputField

support mobile. (Experiment)

support UI Toolkit. (Experiment) (Support from Unity2022)

DEMO

Build with Unity's WebGL Template ( Unity2023.2.2f1 )

Default

Minimal

PWA

How to use

1.download WebGLSupport.unitypackage and import to project

2.add "WebGLInput" Component to InputField GameObject

3.build and run!!

no need to setting anything.

insert \t use tab key instead of changing focus

Add "WEBGLINPUT_TAB" to Scripting Define Symbols.

and check "Enable Tab Text" at WebGLInput.

fullscreen support

Call

WebGLSupport.WebGLWindow.SwitchFullscreen();

to switch fullscreen mode.

Experimental : Support UI Toolkit

sample code

[SerializeField] UIDocument uiDocument;
public void Start()
{
    // find all TextField element
    uiDocument.rootVisualElement.Query<TextField>().ForEach(v =>
    {
        // add WebGLInputManipulator to TextField
        v.AddManipulator(new WebGLSupport.WebGLInputManipulator());
    });
}

webglinput's Issues

Error Uncaught NotFoundError

I am getting an Uncaught NotFoundError that says:

"Failed to execute "removeChild" on "Node": The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler."

It occurs when I am changing the scene with keyboard input still opens. Please help, thank you very much

Full screen in Unity 2020?

<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div
Is not appears on Unity 2020 Index.html.

Is there other solution to enable Full screen support for Unity 2020?

Safest way to hide the auto-generated input field manually

Hi , its me again 😅

I would like to know if there is a way to hide the autogenerated html input field manually ?
(to use it when the user click outside the input or when the user click a button or interact with other elements ) .

Now the inputfield closes fine when the user hit enter on the virtual keyboard. But if the user press another Unity UI element then the html inputfield stays on screen, and the only way to make it desapair is pressing enter in the virtual keyboard.

Question: how to trigger copy function through Unity script

Hi,

I am making a webgl build where the user should be able to copy a code to their system clipboard while pressing on a button, instead of using ctrl+c. With the WebGLInput script, the user can use the ctrl+c functionality only. Is there a way to trigger that through a script using your code?

IOS: Focus lost after closing keyboard.

iPhone X, Safari, IOS Version 15.1
Unity Version 2021.1.19f1

After closing the keyboard the WebGL canvas loses focus. Due to this no UI in the Unity WebGL window can be tapped or interacted with, focus can only be regained it seems by opening your tabs and returning directly back into the WebGL experience. The application is not frozen as animations keep playing smoothly during this time. Logs seem to point to the issue being purely tied to the WebGL canvas losing focus. Doesn't happen on Androids but I've recreated it on several iPhones, some every time the input field closes, others just sometimes.

on tab: insert '\t' instead of changing focus

Hi, instead of using tab to cycle between input fields, I wanted it to insert '\t'. I was able to edit the code a bit to do this and wanted to share it here. Sorry if this is the wrong place to share this. I'm new to git and am still figuring things out.

The problem with this solution is that you can't switch between the "insert \t" and "cycle input fields" functionality easily without hard editing the code. Part of the solution was changing the callback of a tab keydown event from OnTab to OnValueChanged. I don't know if you might have a more elegant solution where a user can choose which functionality they want in the Unity Inspector.

Great work btw! I don't understand most of it because I don't know javascript. You might have a better and less buggy idea on how to do the functionality I coded.

Changes:
In WebGLInput.jslib:

WebGLInputTab:function(id, cb) {
	var input = instances[id];
	// for tab key
    input.addEventListener('keydown', function (e) {
        if ((e.which && e.which === 9) || (e.keyCode && e.keyCode === 9)) {
            e.preventDefault();
            // Runtime.dynCall("vii", cb, [id, e.shiftKey ? -1 : 1]);
           var s = input.selectionStart;
           input.value = input.value.substring(0,input.selectionStart) + "\t" + input.value.substring(input.selectionEnd);
           input.selectionEnd = s+1;
           var value = allocate(intArrayFromString(input.value), 'i8', ALLOC_NORMAL);
           Runtime.dynCall("vii", cb, [id,value]);
        }
	});
},

In WebGLInput.cs, WebGLInputPlugin method declarations

    //[DllImport("__Internal")]
    //public static extern void WebGLInputTab(int id, Action<int, int> cb);
    [DllImport("__Internal")]
    public static extern void WebGLInputTab(int id, Action<int, string> cb);

    //public static void WebGLInputTab(int id, Action<int, int> cb) { }
    public static void WebGLInputTab(int id, Action<int, string> cb) { }

In WebGLInput.cs OnSelect():

    //WebGLInputPlugin.WebGLInputTab(id, OnTab);
    WebGLInputPlugin.WebGLInputTab(id, OnValueChange);

Pressing tab when inputfield focus behavior

When pressing tab while an input-field is selected results in selecting nothing as the next object, then the address bar, this can be repeated as shown below to actually select the next field.

As an example I will use a login form with a username and password which normally can be navigated between with the tab button.

(Navigation between UI elements needs to be set up within Unity beforehand)

Bug example:

• Selected username field.
• {press tab}
• Selected nothing
• {press tab}
• selected browser address bar.
• {press tab}
• selected nothing
• {press tab}
• selected password field

Expected behavior:

• Selected username field.
• {press tab}
• selected password field

It would be nice if tab functionality would remain as usual.

PS: Thank you for your great solution, it was very much needed for our software!

Reversed text on Chrome full screen

Hi!

First, thank you for this plugin, is a must for WebGl. But, I'm experimenting a very weird bug on Chrome with the app in full screen. Any input I use in full screen reverses the order of the text like "olleh".

I would try to debug it on a clean project but, if anyone has any hint to fix this issue I will really appreciate it.

Cheers!

Problem with pasting url from browser address bar

Hi, I just run into a problem with pasting on Firefox
Was really hoping to use your solution, it's the best I could find.
No need to use javascript or html overlay popups to paste text to Unity WebGL.

Steps to reproduce in Firefox 68.0 (64 bits):

1. Copy url from browser address bar
2. Paste url into input field
3. Change url in address bar
4. Copy it again
5. Try to paste url into input field
6. Inputfield hangs, not possible to paste anything

Copy is not working in Safari.

When i try to copy a text in TextMesh Pro InputField, it clear clipboard text.

Using Unity 2021.1.5f, Safari 14.0.3

solved my problem

I am a developer from China. This plugin has helped me. I solved the problem of Chinese input through your plugin 本当にありがとう

Characters going invisible after certain point when using TextMeshPro Input

unity 2019.3.0f1

-Create a new project
-Set to WebGL build
-Import TextMeshPro and WebGLSupport
-Create an InputField(TMP)
-Add WebGLInput component
-Build and Run

After typing 40-50 characters they all become invisible. You can still select them, and they reappear if you go to beggining of line, and go inivisble again if you go to end.

edit: it won't bug in the editor, just when built
edit2: also it won't bug with the default InputField

Long string crashes application layout in WebGL - Windows scale more than 100%

Hi!
I found a bug, while working in 4k and FHD resolution. Replicable in Chrome and Firefox on Windows 10.
Steps to reproduce:

1. Set Windows 10 resolution to 4K or FHD
2. Set Windows scale to more than 100%
   2a. Right click desktop, click Display Settings option
   2b. In section Scale and Layout change to 175%, or 300%
3. In application, insert a very long text into input field with WebGLInput component
4. String overflows input field and application layout crashes (part of window get black - screenshot)
   
   

The mobile input still shows up after change a scene.

Hi, Kou Yeung, Thank you for this wonderful plugin. I have a problem that when I change the scene in my game the mobile input still shows up. Is there a proper way to close this when I change the scene?
Thank you.

In TMPro, even with OnFocus - Select All set to false, in WebGL everything gets selected

When I build the WebGL app the input field ignores this statement and I'm not able to find the statement where you set this in the WebGLInput.cs file.
Thank you.

Canvas stay zoomed after edit text

Hi,
I have the following issue in Mobile , Android Chrome browser (not tested in other browsers) :

• I can show the mobile keyboard after pressing an inputfield ✓
• After hitting "Enter" the edition of the inputfield ends ✓
• The view keeps zoomed and it wont back to the Original size X

Here are some images of the problem im facing;

Before edit inputfield

After edit inputfield

When I input '你',it became whitespace

Can't run project when script imported

Hi,

As soon as I import this script - I cannot run my project. Below is the log

Popup error:

abort({}) at jsStackTrace@https://********/landing/beta/Build/BFbetaTestingRelease.framework.js:739:12
stackTrace@https://********/landing/beta/Build/BFbetaTestingRelease.framework.js:753:11
abort@https://********/landing/beta/Build/BFbetaTestingRelease.framework.js:19:44
instantiateArrayBuffer/<@https://********/landing/beta/Build/BFbetaTestingRelease.framework.js:1189:10

Console error:

failed to asynchronously prepare wasm: LinkError: import object field 'nullFunc_fiiiii' is not a Function
LinkError: import object field 'nullFunc_fiiiii' is not a Function

Uncaught ReferenceError: Runtime is not defined

Unity 2021.2.0b4.3123, in line 4 & 9 of WebGLWindow.jslib :

Runtime.dynCall("v", cb, []);

will throw 'Uncaught ReferenceError: Runtime is not defined'.

fullscreen edits affect viewport in itch.io

after doing the edits to fix the fullscreen mode, when I uploaded the program to itch.io the game was vertically offcenter to the iframe. i used the auto-detect size setting.

auto-detect:

i am not using the manual setting and made it extra big. it is still off center. The margin on the top part is much bigger

Mobile keyboard bugs

Hi @kou-yeung , thanks for your work on this! I found a couple of bugs with the experimental mobile WebGL input you should know about.

Bug 1

• Tap on an input field in Unity WebGL on mobile. The mobile input window appears as expected.
• Tap on the Unity WebGL Canvas, outside of a text input area.
  Expectation: Mobile keyboard and javascript input prompt closes
  Result: Nothing happens.

Bug 2

• Tap on an input field in Unity WebGL on mobile. The mobile input window appears as expected.
• On Android devices, tap the back button.
  Expectation: Mobile keyboard and javascript input prompt closes
  Result: Mobile keyboard closes, but the javascript input prompt remains

Bug 3

• Tap on an input field in Unity WebGL on mobile. The mobile input window appears as expected.
• Tap on a different input field on your Unity WebGL area.
  Expectation: Mobile keyboard stays visible, and javascript input prompt changes to reflect the new input we've tapped
  Result: Mobile input stays visible, and the javascript input prompt changes to the new input, however, the javascript input prompt is now located on top of the input box in Unity WebGL, instead of directly above the keyboard like normal.

Bug 4

• Tap on an input field in Unity WebGL on mobile. The mobile input window appears as expected.
• Destroy, disable, or lose focus on the input field in Unity WebGL
  Expectation: Mobile keyboard and javascript input prompt hide
  Result: Mobile keyboard and javascript input prompt remain visible

Detecting keydown events while typing in the input field with WebGLInput

Hi, while I'm typing in the InputField, I tried to detect keydown events using Input.anyKeyDown so that after a key is typed into the input field, the string is saved through playerprefs. It works in the editor but isn't working when I build to WebGL. Am I correct in assuming it is because of how WebGLInput works that it blocks some of the keyboard input while a InputField is being typed into?

How I'm doing it is something like this:

void Update(){
    if (Input.anyKeyDown){
        // my code for saving data
    }
}

If yes, is there another way I can allow my unity code to detect when a player has typed into the input field? Thank you :D

Mobile browser won't pan back out after entry

On mobile (Safari on Iphone X) the viewport zooms in on field entry, which is certainly a behavior I want. The second field allows entry as well, but upon the keyboard closing and clicking outside the fields, the viewport seems to be stuck, it will not zoom back out or allow thumb panning. If anyone else has had this problem and knows how to fix it, I would love some help!

WebGL: Content type validation not working in TMP_InputField

Hi. I'm using your asset on my inputfields and I'm also using TextMeshPro version 2.1.6. I'm using Unity 2019.4 LTS. In my inputfields I'm using content type = Decimal number and a limit of 6 characters. In TextMeshPro 2.1.6 the decimal separator for the input validation is taken from CurrentCulture. On all my inputfields I'm using your WebGLInput script.
But in the webGL build the validation is not working. I can type multiple decimal separators (both!) - the input can be for example ...,,, which is nonsense. I can also type any letter or symbol... while I should be able to write only digits, minus sign and decimal separator. In unity editor everything works fine.

Have you also encountered this problem?
Cheers
Mike

null error

I am getting an odd null error when I put the build on the actual website. Works fine in testing but when I upload it I get this error:
in Chrome its "uncaught TypeError: cannot read property "offsetWidth" of null" and in FireFox "TypeError container is null" It's only on the input fields that have the script WebGL Input attached. Build is Unity 2019.4.0f1 website is a wordpress site.

Disable Auto Zoom in

just simple question , how to disable auto zoom in when click input field for mobile browser?

Safari Full Screen not working

Hey, on Safari full screen invoke is not working but in Chrome and Firefox it is ok.

Here is the error for your reference:
https://i.imgur.com/iAPeoh9.png

it doesnt work with custom full screen buttons! on pointer down event

public override void OnPointerDown(PointerEventData eventData) { Screen.fullScreen = !Screen.fullScreen; base.OnPointerDown(eventData); }

using this button to go full screen the keyboard wont show!

LICENSE

Could you add a LICENSE file to this project? I'm thinking about using this asset, but I need to know about the license beforehand to avoid some kind of risks.
MIT license is my favorite but the owner can choose any license as you like.

problem as content of ScrollView

When I set InputField with a WebGL input as a child of Content of UGUI ScrollView, it seems that the input field can not get my mouse position. It always selects all of the text when I click in the input filed, and i can't set the caret in the correct position. Is there any solution?
Thanks for your package, it helps a lot!

Option to select/copy only parts of the string?

Hi,
awesome solution you created there, many thanks!

However it would be nice to also have the option to select only a certain part of the text in the InputField instead of automatically selecting the whole String when clicking on it.

mobile keyboard continues on disable input field

when enable the input field run ok, but when disable the mobile keyboard do not disapear, each touch on screen appear the mobile keyboard. please help

Issue on iOS (reversed text)

Hello,

Thanks for the plugin it works great on android.

But on iOS I have reverse text with an error "Cursor locking is not supported on the browser". I don't know if it's related.

Have you got any idea how to solve this problem? I Will continue to work on your source code with the hope to find a solution.

I activate your plugin on this sample only for Android and iOS. It's not activate on desktop.

https://share.seriousfactory.com/Interne/2020/Module/

Quentin

Selection lost on alt tab

When selecting an input field and then alt tabbing out of the browser (chrome) causes the current inputfield selection to be lost.

This is different from a browser's and unity's default behavior where it keeps its selection after an alt tab.

This can cause issues with for instance password managers that auto fill in fields or if the user wants to copy something into his current selection from another window.

It would be nice that the current selection would be kept on alt tabbing.

FullScreen on mobiles

Hello every one. I'm doing WebGl project in Unity and Kou-Yeung's solution was great for me. But now I have a problem, because I use a responsive template and I have a button with the functionality FullScreen. With this button in every screen I can maximize or minimize the screen. I have non problem in desktop, the problem is in a mobile with the method document.makeFullscreen('element-name'). I can't minimize or maximize my screen when I want. Are there a solution for this?, because I want use your solution. Also I want see the function document.makeFullscreen('element-name'), maybe I can change it for my convenient, but I don't know where is it. It would a pleasure if you can help me.

cursor problem

Why does the cursor return to the forefront when I input Chinese?
Where did I set it wrong?

TextMesh Pro support

Hi, I tried to add WebGLInput component to a GameObject that has a TextMeshPro TMP_InputField component, but failed because of an error below. It seems to be a effect of [RequireComponent(typeof(InputField))]

So I hope that WebGLInput can be used with TextMeshPro.

I also think about the implementation a bit, InputField and TMP_InputField shares almost the same methods but not same interface.
So creating a new interface and wrap these classes and apply the same interface may be the way to go.

interface IInputField {
  RectTransform textComponenRectTransform();
  ...
}

class WrappedTMPInputField : IInputField {
  private TMP_InputField target;
  public RectTransform textComponenRectTransform() {
    return target.textComponent.GetComponent<RectTransform>();
  }
  ...
}

Then it becomes able to write code against the interface.

initial text of text input not seen

For my game, on start the game loads the old input string by the player using playerprefs.
When running in WebGL, initially the loaded string is not visible on the inputfield. When I click the inputfield, the loaded string appears but on the bottom of the window. However, when I toggle between different Loaded data, the input appears normally.

When opened:

When input field is clicked:

What different loaded data is toggled and what it should look like on startup:

Edge Browser: "appendChild" undefined

To reproduce:

1. open a built WebGL project. (right click index.html and choose open with Edge)
2. click on an InputField with WebGLInput script attached.
3. Edge browser pops a warning says "appendChild" undefined or null, then stops working

In summary:
It works in editor but not in built release.

Lastest version of WebGLInput.
Unity 2019.1.3
Windows 10 x64

Hello, may I ask if the problem of not being able to enter the project after I try to compile it and run it in full screen has always existed?

GENIUS!!!

It works if the browser canvas is NOT zoomed to full screen.

It dont work if the unity game canvas is zoomed to full screen in the browser.

When in full screen you cant paste anymore, and when you type the text comes out backwards or not at all, seems the cursor stuck at position 0 always.

Oh and im using text edit boxes in a WORLD SPACE canvas instead of SCREEN SPACE.

Can you fix it please?

WebGL Exception when pressing ctrl-Z

This happens in my own proejct and the example at http://kou-http://kou-yeung.mygamesonline.org/WebGLInputSample/index.html

Google Chrome Version 74.0.3729.131.

How to reproduce:

1. Copy a text (browser url)
2. type "asd" in the ContentType:Standard field of the example.
3. select all by clicking the "asd" text.
4. paste browser url with ctrl+v
5. press ctr+z (undo) two times
6. exception
7. interestingly, application keeps working after exception

filling half screen in fullscreen mode (during mobile landscape )

after putting onclick="document.makeFullscreen('gameContainer')" in index.html , facing split screen issue when tilting to lanscape mode in fullscreen mode
Portrait (respective) :


Landscape :

Can't run on android

Who can tell me what happened Orz
The missing part is my ip

multiline-newline inputfield

Hello,
In your demo
If you press enter in the inputfield with content type: MultiLine New Line
It seems to jump multiple times.
Also is your demo using TMP?

Screen not fixed, it scrolls to the bottom of the screen

Hi, whenever I click on some Input Field the entire screen scrolls to the bottom of the screen.

When full screen, everything is fine.

What could go wrong? Do you want me to record a video?

EDIT:
Video - https://drive.google.com/file/d/1LonEcbX7vDDUwKbh0AFprWbaaPEn0WGp/view?usp=sharing

Flashing when updating text in TMP_Inputfield.

in #34.
when input a long text. the text going invisible.

workaround:
disable text one frame. and enable it at next frame.
but have flashing.
try to fix it

Cannot build project with WebGLInput TAB functionality

When I try to build project in Unity 2019 with enabled TAB functionality this is the error I get

https://i.imgur.com/KMEW6MG.png

in Unity2019.canvas was rename?

gameContainer -> unityContainer ?

Unity 2021.2 B11 throw pointer_stringfy is not defined error

Hi there,

Your plugin is amazing and it worked well with previous versions of Unity, However Unity 2021.2 B11 is throwing this error.

Please advise