Touch screen keyboard in Web GL

Unity Engine
,
1

Hi. I have an application with a control panel and some TextField elements. I was expecting that a Virtual Keyboard would appear when I touch any field where I normally enter data with the keyboard. Is there any configuration that I need to do for this or do I have to program it?

2

Hi @JesusGonzalezRodriguez , there is no additional configuration required, it should automatically open the keyboard when you touch the text field. Just to confirm, you are opening the WebGL application on a mobile browser? If so, may you please share the version of Unity and the browser you are current using?

3

HI @FreddyC-Unity . We are using:

  • Unity 2021.3.4f1
  • Unity UI 1.0.0
  • Chrome 104.0.5112.97
  • Android 8.1.0
1 Like
4

@FreddyC-Unity . I checked and saw that everything is up to date

5

@FreddyC-Unity , any update would be great. Thanks!

6

Hi @JesusGonzalezRodriguez , my apologies for the late response and thank you for providing the additional details!

I took a quick look at the version you provided - the virtual keyboard on WebGL (mobile) is not yet supported on 2021.3. While it does not specify what is supported and what is not, I believe there is a “WebGL builds are not supported on mobile devices” warning when loading the WebGL application on your phone. The good news is, we have implemented WebGL support on mobile devices on 2022.1. On this version, you should be able to see the mobile keyboard open and close without any additional implementation.

7

hi @FreddyC-Unity , unfortunately, we were not able to upgrade, because this new bug would affect us:

I am trying to implement it manually with the version that I have installed: Unity 2021.3.4f1

I followed these examples to have the keyboard being shown automatically, but it simply does not work in WEB GL:

8

@FreddyC-Unity , I have upgraded my project to Unity 2022.1.16f1.3632 and exported it to Web GL 2.0. I still could not test it in Android, because the exported version is Web GL 2.0 and my device does not support it, but I have realized that:

In a PC with Windows and Chrome’s latest version, I can’t enter any number in the TextFields elements, it is as if they were read-only. If I export the Build in Development mode, it works…

9

@FreddyC-Unity , I would appreciate an input from Unity side about it. Exporting to web gl 2.0 with Unity 2022.1.16f1.3632 makes my InputBoxes read only in “release” mode. When exporting in Development mode, it works thought.

10

Hi @JesusGonzalezRodriguez , my apologies for the late response. Thank you for providing the specific version - I’ll try to reproduce your issue. May you provide the version of Android you’re developing for?

11

Hi @FreddyC-Unity : I have a test tablet with Android 8.1.0, but the error about InputBoxes being read-only in WebGL can be reproduced everywhere: in Windows, iOS, Android…

12

Hi @JesusGonzalezRodriguez , I might be missing something when trying to reproduce the reported behavior. I am using Unity 2022.1.16f with a very basic setup which just involves creating a UI Document and including a TextField through the UI Builder. I performed the following tests:

  • I build and run the project as WebGL through Unity. Using ngrok, I expose the localhost URL and accessed it through several devices including an android phone (version 8.0.0) with chrome (105.0.5195.136) and I am able to edit the text field
  • Modifying the player settings to make sure it uses WebGL 2.0’s API, extracted, zipped, and uploaded the build to a hosting platform (e.g: itch.io) - give it a quick test, it seemed to worked as expected on Windows running Chrome and Android (Phone) plus iOS (Phone) using Chrome.

I do want to highlight that we have noticed it is quite difficult to open the keyboard and requires a numerous amount of tapping in order for this to open - which might be the behavior you first described. This issue is known and it should be addressed in a future release.

I know the above scenarios (bullet point 1 and 2) might not have covered your specific workflow and it is important for us to do so. If it’s something that you keep constantly reproducing, would you be able to please report a bug (In Unity, Window > Report a Bug…)? You may add all the valuable information you have already provided in this thread which would be of great help for someone to try and reproduce it.

While it might not have been the fix you hoped to have had, I hope this provides a bit of clarity and some sort of next steps where we can help verify, assess, and address said bug.

13

Hi! For anyone facing this issue in the 2022 version, the mobile keyboard is not opening when the text mesh pro input field is used. You have to use the legacy input field to make the mobile keyboard work. I am not sure if this is a bug.

3 Likes
14

@parixit2411 How did you get the keyboard to work? Is there any additional code or can i just use the legacy input field?

15

No just add the legacy input field and it should be working.

16

Also for those who are faced with the problem of zoom on iOS when using the legacy input. To fix that glitch, you need to add this block to your CSS/HTML web template.

input[type="text"]
{
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;
    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;
    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}
2 Likes
17

So I’m on Unity 2022.3.4 and neither TMPinputfield opened a keyboard for me nor the legacy input field. it turns out that in the legacy input field, you shouldn’t be in fullscreen mode. then it works.(I tested only on a Samsung and a Xiaomi device)

1 Like
18

So the trick of using the legacy input field works for me as well. That said, I’d love to know how to fix the text mesh pro input field.

2 Likes
19

I can confirm the virtual keyboard only popped up on legacy text input, but not the TextMeshPro text input. The test is done using 2023.3.13f1 build on Chrome browser on both Android and iOS device. Look forward the TMP text input update to make it consistent.

1 Like
20

I submit the interest in having TMP Input Text Field mobile keyboard fixed in mobile WebGL platform.