I have a login page that contains the usual email and password fields, as well as a log in button. For usability, the autofocus HTML5 attribute has been used on the email field.
When loading the page on iOS, you can tell by the green border that the field has the focus, but because of iOS limitations, the focus is not fully applied to the field, as you can see here with the keyboard not being displayed:
The first thing the user does is touches the email field, but as far as iOS is concerned, you're clicking on a different part of the page. The focus is actually given to the password field instead, because the page shifts upwards to make way for the keyboard that did not display previously:
In a similar behaviour, if the user touches on the password after page load, the log in button is clicked instead and validation errors appear.
Is there any way to solve this?
Why not disable the autofocus when you show the page on iOS?
It would be very annoying when user enter a website and the keyboard pops up without any actions on the page.
I even can't think of any website popping up the keyboard on the load.
Related
I am using flutter_inappwebview to open webview in flutter app.
My use case is, I want to open keyboard as soon as user enters in the webview. The page that I am loading in webview already has a focused input field but the keyboard does not open automatically.
I have to tap on the input field (in the page) in order to open the keyboard. If I load the same page on web-browser, it works fine and shows focused (with cursor) input field.
Some observation that I had - If I interact with web-view and come back to that page, keyboard opens up automatically. So it seems, we have to do some user interaction (real, not programatically) in order to focus element in page.
How to focus by default the webview to let me programmatically set the focus on a specific webview input? Or Is there any thing that can be done in web-page to open keyboard? Thanks in advance.
I have tried everything in web-page to open the keyboard like adding focus only when page is fully loaded. This was done in web-page, not from flutter side. But it does not open the keyboard, just leaves the input field in focused state (but cursor does not appear).
I have a page that is displayed in an UIWebView on an iPad app. The page has an input field, and when the user taps on it, the virtual keyboard popups up.
Currently, the keyboard has the blue 'Go' button. I would like to change the button text from 'Go' to 'Done' and I want to grey-out/disable the button until the user types in at least 1 char.
Is this possible with Javascript/jQuery mobile? I don't have access to the app.
Thanks.
I don't think this is possible. Bu you can change some functionality of the keyboard in html.
Make the button submit your form
Make another keyboard displayed
More features should not be available without access to the app. Instead of greying out the button, you can validate the form before submitting it with jQuery.
Using a Chrome extension in the browser, I allow the user to select a bunch of text to submit to the database. When the user hits enter, a confirm box pops up, but before the user hits 'OK' to submit, I want the user to be able to scroll in the background and double check everything that he's submitting. Is there anyway to make the background scroll while the confirm window is in focus?
You need to initialize the JQ dialog with modal set to false
Official doco on how it works is here: http://api.jqueryui.com/dialog/#option-modal
Provided that the text/fields/data to be submitted isn't huge, you should also consider jasonscript's idea of presenting the data in the popup. From what you're saying though, it's more important to show what they might have MISSED, not just what they included. Perhaps an on the fly screenshot of the webpage at the point they opened the submission form? That would show their selection clearly.
It seems there are several different layouts of the iPad virtual keyboard when it appears for example a user clicks a text field on a web site... is there a way to determine which is shown?
e.g. I have a sign in page which requires a user to enter their email address, therefore, I'd like the virtual keyboard to show with the # symbol on the first page as opposed to having to select the symbols shift when a user clicks in a text field to enter their email address.
Is this possible?
I suggest you to read this article.
It's very complete about how many different keyboards you can show to your users...
Try
<input type="email" />
You can control the keyboard shown by adjusting the input type accordingly.
Html5 introduced several new input types, they can display different virtual keyboards.
Check http://www.w3schools.com/html5/att_input_type.asp
My web app includes a login button which dynamically adds a form to the DOM tree (with a username and password field) and sets the focus to the username field. It all works fine, however the cursor appears fractionally before the field has appeared on screen which I don't like. This being mobile Safari I can't put a setTimeOut on the focus command (the focus command must be in the function called by the users click, calling it from another function causes Safari to ignore it). I can't use a nasty delay as that also delays the loading of the form and the cursor still pops up before the field loads.
Anyone got any (preferably simple) ideas?