Response title
This is preview!
Move this topic
How to prevent autofocus on first input when clicking a link on popup in jQuery Mobile
in jQuery Mobile
•
8 years ago
I have a textarea and a link in a jQuery Mobile popup.
When I click
link, textarea gets focused automatically and keypad is showing. (on ios)
I wanted to redirect to another page by clicking the link, but
before it redirects, keypad is showing which is not necessary as I
don't want to change any text.
I checked jQuery Mobile 1.4.5 demo page but it has same issue:
But it seems 1.3.1 has no such issue.
Please help me!!!
1
Replies(11)
What specific demo did you try?
I tried the "Sign in" form, and it works just fine for
me. I get the popup with username, password, and "Sign in"
button, and it does not bring up the keyboard.
If I tap in an input, then I get the virtual keyboard.
Are you using a third-party keyboard app? They are ALL flakey.
What version of iOS? Earlier 8.xs were very flakey.
I don't know of a JQM demo page that shows a textarea in a
popup. Can you provide a link?
I would not expect text input in a popup to work well on iOS,
though. The virtual keyboard is way intrusive in the way it tries to
take control of the WebView. There is nothing you can do to control
it. It actually scrolls the WebView inside of a native scroll window.
I work-around this in native apps that use a WebView. I use native
code to defeat that scrolling, and then position things as *I* wish.
But it is not open-source code, and I have implemented it only for
RhoMobile Rhodes, not PhoneGap.
Thanks for your reply.
I can see the issue on sign-in popup on iphone5 (ios 8.1.3)
When you tap on sign in button, it doesn't show keypad but
whole page is sliding up and down as it tried to show keypad because
user name field get focused. I think there must be script to loose
focus after clicking button. I can do such thing too using $('textarea').blur();
But what I want is just preventing focus on input when tapping on
button in popup because I don't like unnecessary page sliding.
Leave a comment on watusiware's reply
I cannot reproduce the problem you describe on an iPhone 5S with iOS
8.1.3. The popup just shows perfectly centered, and then once you do tap
an input field, then scrolls the native window that holds the WebView.
(Technically, this is what happens, it does not actually scroll the page
inside of the WebView...)
I tried both with the suggestions bar open and closed. (The
suggestions bar is still causing many problems with different
applications even with 8.1.3. The glitches still aren't all
worked-out.)
That said, I really
don't recommend popups/iScroll/etc with text inputs on iOS.
You cannot fix the problems without using native code, and
that's impossible with Mobile Safari. (Possible with
PhoneGap, etc.)
I
don't have an iPhone 5 to test with. I haven't tried
it on a 4 or 4S, I would have to charge one, but probably not helpful.
Maybe there is some browser setting we have set differently. Hmmm.
Block Pop-ups? I have that enabled. Let me try without...
No, no different. (And that's a different kind of "pop
up" anyway.... It refers to a separate browser window.)
It works just fine for me!
Ok, but could you please let me know if you have a solution to fix this
issue?
You can't reproduce the issue, it's ok.
But actually I have the issue.
So let's assume that input got focused when a link clicked in
popup. How to prevent that auto focus?
So when I tap on link, it just redirect to another page without
focusing (opening keypad).
I think jQuery Mobile must have script like $('input,
textarea').focus() in library. 1.3.1 has no such issue. keypad is
not opening.
Should I find out that script in library and disable it? I
don't want to customize library of jQuery Mobile.
If you have a solution please let me know
Thanks!
Leave a comment on watusiware's reply
How could I possible provide a solution to a problem I cannot
reproduce?!
Is your iPhone jailbroken? Do you have any third-party keyboard installed?
Does anybody else here see this problem?
Leave a comment on watusiware's reply
Hello Guys, I also encounter this problem. Do you guys have solution for
this already?
Leave a comment on Brix Villanueva's reply
Does the demo site fail for you, as the original poster has stated?
If so, can you provide exact instructions for reproducing the
problem? I have not been able to reproduce it myself. Can you mention
the exact version of iOS and device you used?
If the demo site does not fail for you, then it is a problem in
your own code. You should share a demo showing the problem. Provide a
link to your site, or make a demo using jsFiddle or Plunkr.
Leave a comment on watusiware's reply
As well, please clearly state the problem. The original post
doesn't.
The demo specified does not have a <textarea> tag,
but OP states the problem is with popups that have <textarea>.
I do not observe virtual keyboard showing when only pressing the
"Sign In" button as OP states. (not ever focusing in
username or password field) I cannot reproduce the problem. I do not
observe "autofocus" on first field without touching an input field.
The version of iOS stated by OP is obsolete. (Of course this is
an old post.) I tried with iOS 8.3 and iPhone 5S. Earlier version of
iOS 8.x have been notoriously buggy with keyboard.
Leave a comment on watusiware's reply
I've had the same problem, and put out a simple example:
http://examples.adcomsite.net/jqm-popup-ios-bug/
http://examples.adcomsite.net/jqm-popup-ios-bug/
I have verified this bug for the following units:
- iPad iOS 8.3
- iPhone 5 iOS 8.3
- iPhone 4 iOS 6.1.3
Leave a comment on Paul G.'s reply
It looks to me that this may be a bug. It's subtle, because it does
not occur with the most natural use of the form. For the official JQM
demo page, it does NOT occur if you fill username and password, but only
if you first press the button, which would usually be an unnatural
progression by the user. So, I'd imagine that's why the bug was
missed.
Also, after this has occurred, it seems to me that SOMETIMES,
subsequently none of the popups on the page work at all any
more.
It is not specific to
iOS, and can be demonstrated on at least desktop Safari and
Chrome. In those cases, of course, there is no virtual keyboard,
but you can see the blue highlight on the focused input. The
behavior on Chrome is a bit different than on Safari. With
desktop or mobile Safari, the first input is focused. With
Chrome, the second (or perhaps last - cannot tell, as the demo form
has only two inputs) is focused.
The problem can be difficult to see because on a fast enough
browser it won't be noticed, especially if it is not a touch device.
To report an Issue:
Please check outstanding Issues first, to make sure this has not
already been reported.
Leave a comment on watusiware's reply
Related issues already exists. When I test with version 1.4.4 of jQuery
Mobile, the problem is solved, so I can confirm that this is a newly
introduced bug.
Here is a related bug:
https://github.com/jquery/jquery-mobile/issues/7856
Here is a related bug:
https://github.com/jquery/jquery-mobile/issues/7856
Leave a comment on Krik Molde's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to DarbyJin's question