Android browsers keyboard opens/closes on last input field focus - javascript

I'm getting some odd behaviour in the Chrome browser on HTC One and Galaxy S5.
I click on an input field to enter some data and the keyboard opens and immediately closes again.
I've noticed it only happens on the last available input field on my pages.
Has anyone encountered this issue before?
It works fine on the iPhone and desktop browsers.
Thanks

Ok...so it looks like it has something to do with android browsers redrawing the DOM whenever the keyboard appears. I have $(window).resize() function that is getting called each time the keyboard appears in this case. I may just switch it to use $(window).load().

Related

Updating `enterKeyHint` resets the input value on Chrome Android

I'm updating the value of enterKeyHint dynamically in an autocomplete library. When there's a active item, the Enter key should use "go" (to hint that hitting Enter navigates to the item's link) and when there isn't (no query, no results), the Enter key should use "search".
This DOM updates works fine on most mobile browsers, except on Chrome Android. When the update happens, the input value is cleared.
I've reproduced the issue in isolation. The update kicks in at 5 characters.
Here are quick previews on a Galaxy S9:
With Firefox Android, the Enter key's label updates as expected and the input value doesn't change.
With Chrome Android, the Enter key updates but the input value is reset (causing new updates to the Enter key, etc.)
I'm suspecting an inconsistency between how mobile browsers implement the spec, since everything works as expected on Safari iOS, Chrome iOS and Firefox Android. However, I couldn't find anything online, it doesn't seem like this behavior has been reported before (I assume updating this propery isn't too commonplace).
Has anyone ever faced this issue, or understands it? Thanks in advance!

On any iOS Mobile Devices: Inputs within iFrames have issues determining when input is out of focus - Material Design -Recurly

Situation:
Material Design Floating Labels are stuck with a class="in-focused" even when the input is out of focus. The inputs also contain an iFrame generated from Recurly if that helps.
This seems to happen on (Chrome and Safari) browsers for any iOS Mobile device (iPads iPhones any version). Also, the inputs are all iFrames. Sometimes the cursor will disappear (version 9 and below) when you try to tap back into an empty input field as an additional error. The iFrames are generated from Recurly.
I believe there is an issue with Mobile Safari devices where it doesn't recognize a possible Blur event.
Question:
My goal is to remove the class="is-focused" from any element that is not in focus. What would you you recommend as a solution for this problem?
If you would like to reproduce the error you can see if you go to this url: https://pantaya.com/billing/payment (sign up a dummy account if you need to...) You will see the form that gives these errors.
All advice is helpful! Thank you!
Picture attached to see error:

iOS Keyboard Partial Trigger on input focus

When the using the site in Safari on iPhone 5/SE, focusing on either of the two inputs shown below doesn't fully trigger the keyboard. The field toggle and "Done" buttons appear but no keyboard.
We're using a third party chat plugin that we can't swap out for another one.
The live site is: https://www.citywesthousingtrust.org.uk
I'm using the iOS simulator here but it works the same on the physical devices we have too. The issue appears to be limited to iPhone 5/SE.
Any ideas?
The simulator does this because you have a physical keyboard on your mac so no need to display anything (you can type using your computer keyboard).
If you explicitly need the iOS keyboard to show up, press 'command + K' when you're in the simulator
Hope this helps!

WinJs textarea focus issue

When running http://ichord.github.io/At.js/ page in IE10, it works correctly in a sense it returns focus to textarea after selecting suggestion from autocomplete list. It also works when I use on screen keyboard and touch input (on surface rt or simulator).
When I try to run the same code as WinJs app, it works for mouse/keyboard selection, but when I select item using touch it doesn't return focus to textarea, which is really frustrating.
Is it known bug? Are there any known workarounds to it?
What it interesting it also doesn't hide on screen keyboard.

Handle "return" key in MobileSafari javascript prompt() dialog?

In desktop Safari (and basically every other desktop browser), hitting "return" to while a prompt() dialog is displayed is the same as clicking "OK". In my experiments with bookmarklets for MobileSafari, though, I've found that it just defocuses the text field (and hides the keyboard). This is verified in iOS 5.0.1 on both iPhone and iPad, and I believe it behaved that way on at least some versions of 4.x as well.
How do I make "return" activate "OK"?
Using a tag and binding your handler to the submit tag.
$("#myForm").submit(function (event)
{
doStuff();
}
);

Categories