Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Input field in webpage not working with Unity WebGL in page

Discussion in 'Web' started by aiab_animech, Apr 3, 2015.

  1. aiab_animech

    aiab_animech

    Joined:
    Jul 4, 2012
    Posts:
    177
    Hello, I have a page that has an html input field with type=text in the page, beside my Unity WebGL application.
    The WebGL application somehow causes the input fields to not work. I'm guessing it eats input somehow. How can I disable this?
     
  2. Dustin-Horne

    Dustin-Horne

    Joined:
    Apr 4, 2013
    Posts:
    4,568
    Is the WebGL app capturing the keyboard input you think?
     
  3. aiab_animech

    aiab_animech

    Joined:
    Jul 4, 2012
    Posts:
    177
    Yes, that's what I'm thinking. In the same page without the WebGL canvas the input field works just fine.
    Also, I can place the marker in the input field (to make it have focus), and I can even paste into it with ctrl-v. But I can't type and I can't use backspace.
     
  4. jonas-echterhoff

    jonas-echterhoff

    Unity Technologies

    Joined:
    Aug 18, 2005
    Posts:
    1,666
    Dance_M likes this.
  5. aiab_animech

    aiab_animech

    Joined:
    Jul 4, 2012
    Posts:
    177
    Thank you very much! I will try that!
     
  6. aiab_animech

    aiab_animech

    Joined:
    Jul 4, 2012
    Posts:
    177
    The solutions you provided worked great for me. (I disabled keyboard input completly)
     
  7. made-on-jupiter

    made-on-jupiter

    Joined:
    May 19, 2013
    Posts:
    25
    We have a similar issue with HTML sliders.

    Slider works until the emscripten blob is loaded, at which point it becomes unresponsive.

    Submitted as bug (case 667770) in February, but as yet unresolved.
     
  8. Dustin-Horne

    Dustin-Horne

    Joined:
    Apr 4, 2013
    Posts:
    4,568
    I'm not 100% sure this is really a bug... it's necessary for the game to capture keyboard and mouse input otherwise how would you play it? I could take a look at the javascript generated by Unity and see if I can come up with a workaround... I think the easiest would be that when the game loses focus it stops capturing input, and starts capturing when it gets focus again.
     
    Miscellaneous likes this.
  9. made-on-jupiter

    made-on-jupiter

    Joined:
    May 19, 2013
    Posts:
    25
    Dustin: not every Unity app is a game. Our app includes heavy interaction between Unity and the web page around it. We can easily focus the Unity 'pane' by having the user click on it. However, the Unity WebGL build hijacks interaction outside of the Unity pane. The above solution solves the keyboard issue, but some strange focus behaviour remains with mouse interaction, in particular with sliders.

    I did a bit of work yesterday migrating away from regular webkit sliders to jQuery sliders, and results are promising.
     
    Ewanuk likes this.
  10. Dustin-Horne

    Dustin-Horne

    Joined:
    Apr 4, 2013
    Posts:
    4,568
    I'm aware they are not all games.
     
    Miscellaneous likes this.
  11. Unkelben

    Unkelben

    Joined:
    Mar 6, 2014
    Posts:
    7
    Hi,
    I imagine this issue is the reason why my Unity WebGl games don't work with the keyboard within Newgrounds and Kongregate pages.

    Is there anything I can do on my side or to those portals need to do something to their own pages?

    thanks.
     
  12. Lasto

    Lasto

    Joined:
    Oct 2, 2014
    Posts:
    6
    I had the same issue as everybody, I see that this solution helped, but for me it isnt working. Nor the 2. option, to forbid webgl to listen to keayboard via doNotCaptureKeyboard: true, neither the 3. option, to add keyboardlisteningelement to Module. The 3rd option would have been the best for me. I set the focus properly but still WebGL eats all of my inputs ...

    Thx for any suggestion on how to make this work.
     
  13. jonas-echterhoff

    jonas-echterhoff

    Unity Technologies

    Joined:
    Aug 18, 2005
    Posts:
    1,666
    "doNotCaptureKeyboard: true" no longer works in Unity 5.1, as we rewrote input handling in WebGL. But, 5.1.2p1 (which was shipped yesterday) now has an API to switch this setting from Unity scripting code:

    Code (csharp):
    1.  
    2. #if !UNITY_EDITOR && UNITY_WEBGL
    3. WebGLInput.captureAllKeyboardInput = false;
    4. #endif
    5.  
     
    savely00 and aiab_animech like this.
  14. Lasto

    Lasto

    Joined:
    Oct 2, 2014
    Posts:
    6
    And what about that listening element ? It would be better solution for me because I only want to stop webGL from listening when input textfield is focused. But It doesnt seem to work properly either.
     
  15. yuliyF

    yuliyF

    Joined:
    Nov 15, 2012
    Posts:
    194
    Input Field is broken in 5.1.2p1, demo: http://dragonfly.com.ua/webGlTesting/
    I was using:
    Code (CSharp):
    1.     void Awake()
    2.     {
    3. #if !UNITY_EDITOR && UNITY_WEBGL
    4.     WebGLInput.captureAllKeyboardInput = true;
    5. #endif
    6.     }
    and (on early versions it worked):
    Code (CSharp):
    1.    void LateUpdate()
    2.     {
    3.         if(Input.GetMouseButtonDown(0))
    4.             Application.ExternalEval("window.focus();");
    5.     }
     
  16. Marco-Trivellato

    Marco-Trivellato

    Unity Technologies

    Joined:
    Jul 9, 2013
    Posts:
    1,654
    This is a different bug. it'a regression that we are fixing in both 5.2 and 5.1

    I will get the fix back-ported to the next 5.1 patch, which should be out in the next few days.

    Thanks for the heads up!
     
    yuliyF likes this.
  17. 8Observer8

    8Observer8

    Joined:
    Apr 29, 2015
    Posts:
    99
    Code (CSharp):
    1. WebGLInput.captureAllKeyboardInput=true;
    Unity doesn't know WebGLInput. How to include it?
     
  18. jonas-echterhoff

    jonas-echterhoff

    Unity Technologies

    Joined:
    Aug 18, 2005
    Posts:
    1,666
    It is a WebGL-only API, so you need to put it inside a conditional like this:

    Code (csharp):
    1.  
    2. #if !UNITY_EDITOR && UNITY_WEBGL
    3.     WebGLInput.captureAllKeyboardInput = true;
    4. #endif
    5.  
     
  19. 8Observer8

    8Observer8

    Joined:
    Apr 29, 2015
    Posts:
    99
    Yes, I use like this. I had this problem because I used 5.1.2f1. I updated Unity for 5.1.3f1

    So, I added this code in Start() in my simple snake game. Can it work in iFrame? Snake_v1.0.1 (source)

    I upload my application on social network vk.com. But keyboard input doesn't work. Is it a problem with vk.com or with Unity?

    You can run it.

    Keyboard input will start to work if you will press W and will click on scene when the game are starting.
     
  20. Marco-Trivellato

    Marco-Trivellato

    Unity Technologies

    Joined:
    Jul 9, 2013
    Posts:
    1,654
    the new API mentioned here, will allow you to control whether all keyboard inputs will be captured by the webgl canvas, or they will also be sent to html input fields. This does not seem to be your problem, isn't it?
     
  21. CelsoMdeMelo

    CelsoMdeMelo

    Joined:
    Jul 16, 2016
    Posts:
    2
    This code allows keyboard input on input fields; however, some mouse events are still broken. For instance, the arrows in an input field of type 'number' don't work (in Chrome 51). Is there a solution for cases like this?
     
    Last edited: Jul 16, 2016
  22. jonas-echterhoff

    jonas-echterhoff

    Unity Technologies

    Joined:
    Aug 18, 2005
    Posts:
    1,666
    Could you file a bug with a repro case about this, and report the case number here?
     
  23. Creer_LLC

    Creer_LLC

    Joined:
    Feb 28, 2017
    Posts:
    15
    The keyboard doesn't seem to work on mobile ( chrome) with webgl... I use unity 5.5.0f3 at the moment. Thanks
     
    JTJK likes this.
  24. DAVcoHL

    DAVcoHL

    Joined:
    May 3, 2017
    Posts:
    15
    Using Unity 2017.1.0p1, the WebGLInput object no longer seems to exist - however the manual page still seems to exist. Has this feature been deprecated or should WebGLInput still be present?
     
  25. Marco-Trivellato

    Marco-Trivellato

    Unity Technologies

    Joined:
    Jul 9, 2013
    Posts:
    1,654
    Does it not exist at compile time? Have you used the proper #define's?
     
  26. DAVcoHL

    DAVcoHL

    Joined:
    May 3, 2017
    Posts:
    15
    Thanks Marco - you're right; reading through the thread again, WebGLInput in fact only exists in WebGL builds, so the !UNITY_EDITOR is mandatory.

    This should probably be noted on the manual page.
     
    sama-van likes this.
  27. sama-van

    sama-van

    Joined:
    Jun 2, 2009
    Posts:
    1,734
    Just tried in a browser with a scroll and the captureAllKeyboardInput = false does nothing at all.
     
  28. chitzui

    chitzui

    Joined:
    Oct 13, 2017
    Posts:
    6
    Where to place it? In which file? Which function? What?
     
  29. DAVcoHL

    DAVcoHL

    Joined:
    May 3, 2017
    Posts:
    15
    You can place the code in any C# file you like, but it would probably be best in the Awake() function of your central game-manager, or something else that will be hit immediately on loading the app.
     
  30. dienat

    dienat

    Joined:
    May 27, 2016
    Posts:
    417
    Yes, keyboard for mobile doesnt work with WebGL, i tried the
    Code (CSharp):
    1. #if !UNITY_EDITOR && UNITY_WEBGL
    2.     WebGLInput.captureAllKeyboardInput = true;
    3. #endif
    but it doesnt work
     
  31. StephanK

    StephanK

    Joined:
    Jul 10, 2012
    Posts:
    47
    Doesn't work for me either. Is this broken? I'm setting captureAllKeyboardInput to false in Start(). When the player loads I can't type into input or textarea fields. I'm still getting keydown and keyup events in javascript, but the textarea doesn't update the text.
     
  32. OrderOfOut

    OrderOfOut

    Joined:
    Sep 21, 2018
    Posts:
    37
    Thank you, the C# WebGLInput solution worked for me after about four hours of banging my head against the wall trying to figure out why the heck I couldn't type text into my input fields that I had in the same container as my webGL Unity application.

    (in my case, I am building a game that takes data from a client's scientific study task code, which is written with javaScript libraries, and we need to have everything in the same browser window, but it's simply not worth our time to rewrite their code in Unity)
     
    Last edited: Sep 28, 2018
  33. MFKJ

    MFKJ

    Joined:
    May 13, 2015
    Posts:
    264
  34. AIS_Technolabs_Unity3d

    AIS_Technolabs_Unity3d

    Joined:
    Dec 7, 2018
    Posts:
    2
    - webgl input field portuguese special characters not working
    - Not possible to enter special characters like ã ç, é, etc. entering these characters with ABNT or ABNT2 keyboard.
     
  35. atiqanazir15

    atiqanazir15

    Joined:
    Apr 23, 2020
    Posts:
    1
    i have installed a package for vue-unity-webgl now i'm facing he same problem with the input after importing the unity container in vue component. I don't understand where to place this code.Kindly someone help me with this my project is stuck :(
     
    Last edited: Apr 23, 2020
  36. Toscan0

    Toscan0

    Joined:
    Oct 9, 2018
    Posts:
    11
    Hi, i placed this in a random script of my project and it work just fine.
    Code (CSharp):
    1. void Awake()
    2.     {
    3.         #if !UNITY_EDITOR && UNITY_WEBGL
    4.             WebGLInput.captureAllKeyboardInput = true;
    5.         #endif
    6. }
     
    ilanyonatan772 likes this.
  37. ngoctandole

    ngoctandole

    Joined:
    Feb 23, 2023
    Posts:
    1
    How do I capture keyboard input in both platforms which are ReactJS and Unity?