I have a requirement to set the focus to a textbox in a page when the page loads. My target device is ipad.
I heard that, by design, it is not supported in ipad.
But is there a workaround for this?
Maybe this can help you:
By design, some focus() events in Mobile Safari are ignored. A lot of sites would do focus() unnecessarily and bringing up the keyboard is slow/intrusive.
Related
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
This will be difficult to explain so I won't paste any code.
I'm implementing a wysiwyg editor on my site called wysihtml5 and there are several issues when selecting the textarea/editor with the iPad. On a desktop browser, all is fine, the text can be selected, edited, pasted etc. But on the iPad multpiple issues occur:
Can't tap anywhere in the text to move the cursor there
If I manually move the cursor, all of a sudden I can't type anything anymore
Tapping outside of the texteditor doesn't bring the keyboard down
Basically I'm just hoping there's someone who has had similiar experiences with iPad cursor not behaving correctly in text input fields and what possible solutions there might be. I'm stuck and have no idea how to debug this.
Did you use touch event? iOS has a bug: you can't input in editable iframe if you are listening(or had listened) any touch event(touchstart, touchmove...), I tested this bug occurs even you listen other elements but iframe itself. yes, it's a serious bug, you can check out:
wysihtml5 issues98
I am working on one of my company's product. It is a focus lost issue. We are using iframes, in this particular page when we touch/click outside input box/ textarea, then onscreen keyboard get disable. This issue comming on all ipads and both browsers Safari & Chrome. We are not able to figure out this issue. It will a gr8 help for us, if you had gone through smilar kind of issue, pls share your experience.
jQuery Mobile page transition effects on any button click or any event are looking weird. What should I do to make it feel better?
Do they seem to flicker a bit?
If so, there's a discussion here:
jQuery Mobile blinking at page transitions on iPad
on the topic of the iPad transition flicker.
Seems an upgrade to iOS 5.0 may solve the problem. Also, if you are running it as an app, try in Safari. The bug was supposed to have been fixed in Safari.
When running on a touchscreen device (iPhone, in my case, but I presume it does this on others), when the virtual keyboard pops up for a form field, there are added navigation buttons at the top of the keyboard: "previous", "next", "done". (And sometimes "autofill").
This is apparently the Mobile Safari "form assistant".
I find this redundant, superfluous, and confusing. iPhone users aren't used to this in native apps, and it's unnecessary. It's a touch device. You touch what you want to change. There's no need for navigation buttons!
I suppose users may be familiar with this, IF they use their device often to fill forms on websites. I've had an iPhone since the 3G, and never noticed this. I don't think I've ever filled a form on Mobile Safari! (I would use my desktop...)
The form assistant is there for navigating forms on websites, which might not be designed appropriately for a mobile device. So, in that context it serves a useful purpose.
But when using JQuery Mobile, you ARE designing an interface for use on a touchscreen mobile device. There shouldn't be a need for the form assistant. I find it particularly annoying in a local app (PhoneGap, Rhodes, etc.).
I've done some searches, and haven't come up with a solution.
Does anybody know how to turn this off?
sorry, its not possible to remove the Form Assistant inside mobile safari.
There is no solution for mobile Safari, but for PhoneGap there certainly is.
As of 2.6.0 there is an option in the config.xml
<preference name="HideKeyboardFormAccessoryBar" value="true" />
For versions before 2.6.0, or more sophisticated use, there is the KeyboardToolbarRemover, which even allows to dynamically show and hide the keyboardAcessoryView.
In your Javascript, include the module
var toolbar = cordova.require('cordova/plugin/keyboard_toolbar_remover');
To disable the toolbar
toolbar.hide()
To re-enable the toolbar
toolbar.show()