Focus on input in iOS8 Makes the whole page jump - javascript

I have two problems that happen only in iOS 8:
I have a login form which includes two inputs for username and password. In iOS 8 Safari, when I move from input to input, the page jumps in a weird way. I found a post that describes exactly the same thing: https://github.com/driftyco/ionic/issues/2256
After focusing a text input by clicking on it, the window closes itself. And that's the more serious problem. Is there a way to solve it with only JavaScript/jQuery?

Related

Search input field is blocking on Android (website)

Minor bug I'm trying to fix on Android devices accessing a site.
Flow goes like this:
User inputs text, list returns answers.
User clicks li element, is scrolled to the next page (ng Anchorscroll).
User is then at the top of next page, and can enter next input.
This is fine on iOS and web, but the keyboard is blocking on Android.
I hope this doesn't violate SO terms, but here is a video of the problem with my web app (I won't upload the code).
https://youtu.be/YwXRV_APMOQ
I have tried using conditions such as ‚ "if Androiddocument.activeElement.scrollIntoViewIfNeeded();
On resize $(input).focus();, and even onclick="window.location.href="#destination"
But none are working.
Looking for some sort of work around or help, thanks! :)
Found a work around. On click, focus on the next input. This pulls the input into the screen on Android, which is the behaviour needed.
(I've used Angular method, but can you any language)
How to set focus on input field?

Auto Focus Form Element on iPhone/iPad

I'm trying to create a web application that automatically focuses the text input box upon page load.
However, I know that the 'autofocus' attribute isn't supported in mobile safari. The reason I need it to autofocus is because I am developing a web application so to say, and it basically requires the user to use their bluetooth scanner to send input to a PHP page that then POSTs that data (and hence, leaves the page briefly). Upon return, I wish for the box to be focused again, ready for the next scan. And as you may have guessed, my client wishes to use an iPad/iPhone.
The input is essentially just a keyboard wedge, a series of keyboard strokes will be sent wherever the focus is.
I've tried using the JavaScript and jQuery code below to no avail;
$( document ).ready(function() {
$( "#scan-input" ).focus();
});
Didn't work. And;
function formfocus() {
document.getElementById('scan-input').focus();
}
window.onload = formfocus;
Didn't work either when placed at the bottom of the page(s).
I've tried searching for this problem and found;
How can you autofocus on a form field in iPhone Safari?
But there wasn't any helpful information returned either.
Now when I use the JavaScript and jQuery code posted above, it does infact work on my web browsers but again, not on the iPad or iPhone (I'm using an iPhone for testing with an incognito window each time to clear cache as a precaution).
Does anyone know a way to force the focus to a text input box on iPad/iPhone?
For usability reasons all the focus() functions are ignored by Safari in iPhone/iPad for usability reasons
Quora

Restore form values when returning to page in iOS Chrome

Here's how it works in Safari on iOS (and this is the behaviour I want):
If I enter some text into a text field on a page, click a link on the page which loads another page and then returns to the previous page using the back button, the text I entered into the text field is still there.
Using Chrome on iOS, this does not work, however. The textfield is empty when returning to the page.
Is there an explanation for this and is there a solution? Using localeStorage and a cookie to cache the form data doesn't feel like a good solution, as I have to keep track of when that data should be removed from the cache.
I have the same issue. After much researching and testing, I concluded that it's a bug for Chrome. I hope Google will fix it soon. Here's the bug report I logged:
https://code.google.com/p/chromium/issues/detail?id=470398

Android keyboard remains after sending an email Phonegap

Built a Phonegap app, and emails in this app are handled using whatever email program the user chooses after clicking the email button. The email button is just a standard HTML <a href="mailto:address"> link.
The problem is, after the user hits send on the email, when they return to the app, the Android keyboard is still there, floating. This occurs regardless of what email program is being used, but only on Android.
I have already tried doing .focus() and .blur() as suggested in other solutions, and even added a hidden text input on the page to target with the focus/ blur action because there are no input elements on the page otherwise.
Do any of you know any other techniques to make the keyboard go away after sending an email, and/or what could cause the keyboard to remain on the screen?
Thank you all in advance.

Is it possible to dismiss the on-screen keyboard for a mobile website using JavaScript?

I don't actually want to do this; I'm just curious if it's possible. Apparently there are some hacky ways to check whether an on-screen keyboard is visible; however, I'm wondering if you can actually dismiss the keyboard using JavaScript.
That is, if you have a form that the user is filling out, and they enter an input field so the keyboard appears, is there any way to make it disappear?

Categories

Resources