Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HTML5] Experimental (opt-in) virtual keyboard support. #46913

Merged
merged 2 commits into from Mar 12, 2021

Conversation

Faless
Copy link
Collaborator

@Faless Faless commented Mar 11, 2021

In this PR:

  • Add IME support check in LineEdit/TextEdit (avoid spamming "IME is unsupported" when the DisplayServer report it as such)
  • Opt-in virtual keyboard support for the HTML5 platfform.

Added as an export option "Experimental Virtual Keyboard".

Experimental Virtual Keyboard

There is no zoom, so text/line edit must be in the top part of the screen, or it will get hidden by the virtual keyboard.
UTF8/Latin-1 only (I think regular UTF-8 should work out of the box in 4.0 but I can't test it).

It uses an hidden textarea or input, based on the multiline variable, and only gets activated if the device has a touchscreen.

This could cause problems on devices with both touchscreen and a real keyboard (although input should still work in general with some minor focus issues). I'm thinking of a system to detect the first physical keystroke and disable it in case, but it might do more harm then good, so it must be well thought.

Closes #41097
Fixes #32680

Avoid spamming "IME is unsupported" when the DisplayServer report it as
such.
Added as an export option "Experimental Virtual Keyboard".
There is no zoom, so text/line edit must be in the top part of the
screen, or it will get hidden by the virtual keyboard.
UTF8/Latin-1 only (I think regular UTF-8 should work out of the box in
4.0 but I can't test it).
It uses an hidden textarea or input, based on the multiline variable,
and only gets activated if the device has a touchscreen.
This could cause problems on devices with both touchscreen and a real
keyboard (although input should still work in general with some minor
focus issues). I'm thinking of a system to detect the first physical
keystroke and disable it in case, but it might do more harm then good,
so it must be well thought.
@akien-mga akien-mga merged commit 08767a1 into godotengine:master Mar 12, 2021
@akien-mga
Copy link
Member

Thanks!

@jjcampis
Copy link

jjcampis commented Jun 3, 2021

hello, how can i implement this in godot 3.2?

i need this because i need to implementing in a webview and the 3.3 uses fetch api, and i needed in xhr, thanks

@Calinou
Copy link
Member

Calinou commented Jun 3, 2021

hello, how can i implement this in godot 3.2?

You can try to backport the patch manually to the 3.2 branch then compile custom HTML5 export templates, but there may be merge conflicts you have to solve before it can compile.

@Faless Faless deleted the js/4.x_vk branch June 3, 2021 17:35
@schweigert
Copy link
Contributor

This saved my life. Thank you very much @Faless

@jet-amp
Copy link

jet-amp commented Feb 20, 2023

Hi, if you use this on iPhone it will automatically zoom into a LineEdit and left user with no option to zoom out (even pinch to zoom out is not working). Also they will be a misplace typing cursor appear on the screen.

@Calinou
Copy link
Member

Calinou commented Feb 20, 2023

Hi, if you use this on iPhone it will automatically zoom into a LineEdit and left user with no option to zoom out (even pinch to zoom out is not working). Also they will be a misplace typing cursor appear on the screen.

Please open a new issue with a minimal reproduction project attached.

@panda666x
Copy link

panda666x commented Jun 16, 2023

LineEdit

Hi, if you use this on iPhone it will automatically zoom into a LineEdit and left user with no option to zoom out (even pinch to zoom out is not working). Also they will be a misplace typing cursor appear on the screen.

input{
font-size:16px;
}

in the header (in the style tag) of the output HTML file.

@ElvisVilla
Copy link

Hi, if you use this on iPhone it will automatically zoom into a LineEdit and left user with no option to zoom out (even pinch to zoom out is not working). Also they will be a misplace typing cursor appear on the screen.

Im having exacly the same, issue, with Godot 3.5, did you found a solution for this, is there at least a way that we can zoom out after the virtual_keyword went hide? I would appreciate the help, this bug makes the app unsuable.

@Calinou
Copy link
Member

Calinou commented Feb 26, 2024

@ElvisVilla Please open a new issue with a minimal reproduction project attached.

It sounds like this particular issue could be resolved by changing the meta name="viewport" tag in the HTML template from:

<meta name="viewport" content="width=device-width, user-scalable=no">

to:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

See https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming for details. This should only be done for iOS Safari to avoid harming accessibility on other platforms though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Text/LineEdit not taking input on mobile browsers
8 participants