Textareas/Textboxes and Soft-Keyboard Problems on Mobile

Just starting out? Need help? Post your questions and find answers here.
User avatar
DanLJr
Posts: 58
Joined: Wed Jul 04, 2018 4:24 am
Location: USA

Textareas/Textboxes and Soft-Keyboard Problems on Mobile

Post by DanLJr »

Fred, SB Devs, SB Community, Et Al,

I had a previous issue with controls like textboxes and checkboxes not being properly targeted in iOS web browser. The textboxes using soft-keyboard were the worst. Fred has fixed the iOS-specific targeting issues with controls/gadgets (like textboxes and checkboxes) via updating the meta, and it definitely resolved the direct issue - checkboxes target fine, but textboxes...anything that pops-up the soft-keyboard...still has serious problems, at least for me. Let me explain in detail...

I am still having issues on mobile devices (I don't think it's device or OS specific, either - just a general issue with mobile browsers and soft-keyboards as a whole) where when when I click on a textarea/EditorGadget control (and I think it happens with StringGadgets, too - though the specifics of the odd behaviour of the soft-keyboard are slightly different between the two). Basically, what happens is that the keyboard either doesn't popup, or it pops-up, but focus isn't on the control (or the control is now hidden behind the soft-keyboard, etc.)

Everything seems to work perfectly on mobile EXCEPT whenever I need to type-on/pop-up the soft-keyboard. It just doesn't seem to properly "hook up" with the field I'm attempting to edit like I would expect it to.

I'm having this same problem on two different apps I'm developing, and I'm about to take one LIVE (Monday of next week at the LATEST for initial launch) but just realized I'm still having this mobile issue with TextBoxes/EditorGadgets and the soft-keyboard on mobile browsers. (And, of course, most people will be trying to access this system with some sort of mobile device, so...)

Anyhow, can you guys offer me any general advice, or an example of a working SB app showing soft-keyboard and text entry on web browsers? (And/or a little code example of something that DOES work?)

I'm willing to just change the way I implement things, if need be, but I have no clue how to proceed, as I did everything pretty much "stock" ("by the book") - nothing really unusual about my stuff - just using SB code to do it as designed. Works perfectly in desktop and mobile browsers, EXCEPT when entering text via soft-keyboard in mobile browsers.

Thoughts?

A bit further below (in this message) is a link to a text adventure game I've been developing in SB. (Very early alpha, but playable...still adding a lot of content and features, of course. This stated as a learning project for me to experiment, and since has evolved into a full-blown project with a definitive outcome. So far, it's been fun to build! Content is far from fully populated, but one level is full-featured, and several other areas do work, even if there's not much to do there, but I digress...)

Anyhow, this demonstrates the issue I'm having with not being able to use the soft-keyboard and EditorGadgets together on mobile web browsers. (My main user input box, and the only thing that gets focus, really, is an EditorGadget.) It works nicely in all browsers on the desktop, and not at all, really, on mobile browsers - solely because of the soft-keyboard/textarea issues. (Everything shows-up properly, resies correctly, etc, but no successful soft-keyboard functionality.)

FYI: I have a similar issue on another app I'm developing that is assessment/testing software. (And this is the one I need to launch on Monday! Ouch! Everything is done. Just having these textarea/textbox issues with soft-keyboard on mobile.) If I can resolve it in the game front-end first, I will likely be able to apply the same techniques on my other software, and it was just much easier to deploy the game to share with the community than the assessment/testing software, because of back-end deployment issues, etc. involved with the assessment/testing app. (The testing software uses both EditorGadgets and StringGadgets, and both have problems with soft-keyboards in web browsers.) I menioned this next thing at the very top already, but thought it was worth repeating... Since the recent SB update(s), checkboxes are now targeting properly - they don't use the soft-keyboard, but they were also having difficulties selecting the object in past versions - now that seems to be fixed 100% in the latest SB version(s). Now it's just working around the soft=keyboard problems with textareas/textboxes that remain.

Anyhow, here's the link to that text adventure game I'm been writing that demonstrates the issue on mobile browsers:

https://skywardthought.com/dark-alpha/play-v0.1.9.html

(I did not optimize the JS, so you should be able to look at things easily enough if you're a JS guy.)

Please let me know what you find regarding the inability to properly use a soft-keyboard to type into textareas/textboxes. I would be in your debt if you have a quick work-around, even if I need to change how I go about front-end development on my end using SB. I'm so VERY close to being done on my testing/assessment software (I must have a working live release for next week, even if not mobile-friendly, but I'd love to have it all working by then!) and getting this soft-keyboard thing working would actually help me finish the project 100% successfully, and on-time, for my most cherished client. (And it couldn't hurt for my game, either, though that is a few weeks away - at the very least - from any kind of real beta release with completed content.)

Thanks in advance for your help!
-Dan L.
User avatar
DanLJr
Posts: 58
Joined: Wed Jul 04, 2018 4:24 am
Location: USA

Re: Textareas/Textboxes and Soft-Keyboard Problems on Mobile

Post by DanLJr »

Fred? Peter? Anybody?

This seems like a pretty basic/standard thing, so I'm not sure what to do differently. Could someone "in the know" (the SB devs, other experts?) Please offer some advice? (This doesn't seem like something that should be hard/impossible to overcome. I just don't know where to begin at this point...)
DanLJr wrote:Fred, SB Devs, SB Community, Et Al,

I had a previous issue with controls like textboxes and checkboxes not being properly targeted in iOS web browser. The textboxes using soft-keyboard were the worst. Fred has fixed the iOS-specific targeting issues with controls/gadgets (like textboxes and checkboxes) via updating the meta, and it definitely resolved the direct issue - checkboxes target fine, but textboxes...anything that pops-up the soft-keyboard...still has serious problems, at least for me. Let me explain in detail...

I am still having issues on mobile devices (I don't think it's device or OS specific, either - just a general issue with mobile browsers and soft-keyboards as a whole) where when when I click on a textarea/EditorGadget control (and I think it happens with StringGadgets, too - though the specifics of the odd behaviour of the soft-keyboard are slightly different between the two). Basically, what happens is that the keyboard either doesn't popup, or it pops-up, but focus isn't on the control (or the control is now hidden behind the soft-keyboard, etc.)

Everything seems to work perfectly on mobile EXCEPT whenever I need to type-on/pop-up the soft-keyboard. It just doesn't seem to properly "hook up" with the field I'm attempting to edit like I would expect it to.

I'm having this same problem on two different apps I'm developing, and I'm about to take one LIVE (Monday of next week at the LATEST for initial launch) but just realized I'm still having this mobile issue with TextBoxes/EditorGadgets and the soft-keyboard on mobile browsers. (And, of course, most people will be trying to access this system with some sort of mobile device, so...)

Anyhow, can you guys offer me any general advice, or an example of a working SB app showing soft-keyboard and text entry on web browsers? (And/or a little code example of something that DOES work?)

I'm willing to just change the way I implement things, if need be, but I have no clue how to proceed, as I did everything pretty much "stock" ("by the book") - nothing really unusual about my stuff - just using SB code to do it as designed. Works perfectly in desktop and mobile browsers, EXCEPT when entering text via soft-keyboard in mobile browsers.

Thoughts?

A bit further below (in this message) is a link to a text adventure game I've been developing in SB. (Very early alpha, but playable...still adding a lot of content and features, of course. This stated as a learning project for me to experiment, and since has evolved into a full-blown project with a definitive outcome. So far, it's been fun to build! Content is far from fully populated, but one level is full-featured, and several other areas do work, even if there's not much to do there, but I digress...)

Anyhow, this demonstrates the issue I'm having with not being able to use the soft-keyboard and EditorGadgets together on mobile web browsers. (My main user input box, and the only thing that gets focus, really, is an EditorGadget.) It works nicely in all browsers on the desktop, and not at all, really, on mobile browsers - solely because of the soft-keyboard/textarea issues. (Everything shows-up properly, resies correctly, etc, but no successful soft-keyboard functionality.)

FYI: I have a similar issue on another app I'm developing that is assessment/testing software. (And this is the one I need to launch on Monday! Ouch! Everything is done. Just having these textarea/textbox issues with soft-keyboard on mobile.) If I can resolve it in the game front-end first, I will likely be able to apply the same techniques on my other software, and it was just much easier to deploy the game to share with the community than the assessment/testing software, because of back-end deployment issues, etc. involved with the assessment/testing app. (The testing software uses both EditorGadgets and StringGadgets, and both have problems with soft-keyboards in web browsers.) I menioned this next thing at the very top already, but thought it was worth repeating... Since the recent SB update(s), checkboxes are now targeting properly - they don't use the soft-keyboard, but they were also having difficulties selecting the object in past versions - now that seems to be fixed 100% in the latest SB version(s). Now it's just working around the soft=keyboard problems with textareas/textboxes that remain.

Anyhow, here's the link to that text adventure game I'm been writing that demonstrates the issue on mobile browsers:

https://skywardthought.com/dark-alpha/play-v0.1.9.html

(I did not optimize the JS, so you should be able to look at things easily enough if you're a JS guy.)

Please let me know what you find regarding the inability to properly use a soft-keyboard to type into textareas/textboxes. I would be in your debt if you have a quick work-around, even if I need to change how I go about front-end development on my end using SB. I'm so VERY close to being done on my testing/assessment software (I must have a working live release for next week, even if not mobile-friendly, but I'd love to have it all working by then!) and getting this soft-keyboard thing working would actually help me finish the project 100% successfully, and on-time, for my most cherished client. (And it couldn't hurt for my game, either, though that is a few weeks away - at the very least - from any kind of real beta release with completed content.)

Thanks in advance for your help!
-Dan L.
-Dan L.
:: falling on my face a lot lately; learning even more because of it! ::
munfraid
Posts: 104
Joined: Sat Mar 24, 2018 1:33 pm

Re: Textareas/Textboxes and Soft-Keyboard Problems on Mobile

Post by munfraid »

I just see a blank white page on iOS / Safari and on Desktop / Firefox and Chrome.
Best would be to provide a small running example code that shows the issue.
User avatar
DanLJr
Posts: 58
Joined: Wed Jul 04, 2018 4:24 am
Location: USA

Re: Textareas/Textboxes and Soft-Keyboard Problems on Mobile

Post by DanLJr »

Sorry. I updated the code recently, but forget to expand one of the folders that I had compressed for transfer/upload. Try this link again, and hit REFRESH if you see a white screen. It WILL work this time. (You will see what looks like a "green screen" - black background, green lettering.) Please try gain:

https://skywardthought.com/dark-alpha/play-v0.1.9.html

I'm desperate to figure out what's going on with the soft-keyboard on mobile. No issues on Desktop - works fine (now that I actually expended the files to the right folders.)

Thanks in advance for your help.
munfraid wrote:
I just see a blank white page on iOS / Safari and on Desktop / Firefox and Chrome.
Best would be to provide a small running example code that shows the issue.
-Dan L.
:: falling on my face a lot lately; learning even more because of it! ::
User avatar
Paul
Posts: 195
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada
Contact:

Re: Textareas/Textboxes and Soft-Keyboard Problems on Mobile

Post by Paul »

This seems like a pretty basic/standard thing, so I'm not sure what to do differently. Could someone "in the know" (the SB devs, other experts?) Please offer some advice? (This doesn't seem like something that should be hard/impossible to overcome. I just don't know where to begin at this point...)
I don't think it's a problem specific to SpiderBasic and iOS.
I use a different platform for developing Mobile apps and for iOS when the keyboard is called I have to program the layout to shift up so the gadget in focus is not covered by the keyboard. Android seems to take care of this for you but iOS does not.

So maybe Fred needs to do this behind the scenes when the keyboard is called or provide commands so you can do this yourself?
Post Reply