Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
On iOS when filling out a form on a webpage there are Next and Previous buttons on the keyboard that act like the tab key on a real keyboard. We have a web application, which I’ve implemented as an app using PhoneGap, and the Next and Previous buttons skip past checkboxes as if they are not there.
Is there any way to make the Next and Previous buttons work with checkboxes using PhoneGap/UIWebView/Safari on iOS?
This can be simulated using just HTML.
Insert a text input element just before the checkbox. Add JavaScript so pressing a key when that input has focus changes the checkbox state.
Here is a jsbin example which you can edit the source. Notes about this example:
do not use a
<fieldset>– selecting text using long touch of an input force-closes iOS 6 in the edit mode of jsbin (must be some interaction with jsbin code or iframe), and hides the caret always (which sounds useful for this situation but isn’t!). Looks to me like due to a bad Safari bug (but I didn’t really look into it, and didn’t report it since too much hassle.)the
visibility:hidden;idea using an<option>element doesn’t work because if the user touches an option then the keyboard hides.I didn’t spend much time finding a good style to use for the focused checkbox – if anybody comes up with something better please comment.
There is some junk stuff in the jsbin example for ideas that didn’t work to hide the flashing caret. I would be interested if there is a tidier solution for hiding the caret.
There would need to be some browser sniffing to apply this fix to just iOS devices.
this is not standard iOS UI behaviour, so could confuse users when going to other apps, or have other negative effects. Solution could easily be broken by future releases of Mobile Safari.
I tried a few different ways of hiding the caret, and the most effective seems to be using
-webkit-transform: scale(0.01); transform: scale(0.01);. Using font-size: 1px; almost works but causes the iPhone to zoom when the input gets focus (tested iPad iOS5 and it didn’t zoom, tested iPhone iOS6 and it zoomed).