One my webpage I have a bootstrap model opened which has a form with two text boxes and few buttons. When I touch text box keyboard opens which is what I would expect but when I press done (on top of open keyboard) to close keyboard, safari on iPhone it scrolls all the way to the top of the page. This is causing model to loose focus and scroll events are being sent to underlying main page. So the question is, is there any way to get keyboard close event so that I can override this behaviour or any other way prevent it from happening. It's only happening on iPhone chrome and iPhone safari. It works fine on android chrome.
Related
When typing into a text box with the on-screen keyboard and then tapping on a clickable element while the keyboard is still open
the on-screen keyboard disappears as expected
the tap is ignored, I see in the debugger that the click event handler isn't even reached
tapping on the clickable element again, it now works as designed.
Tapping on other elements on the page with a click event handler while the keyboard is open works fine. One difference is that the unclickable button comes up only while typing, as it is in an autocomplete dropdown, a <ul> element switched visible by removing display: none after the third character is typed.
This happens on Firefox for Android, recent versions. It works in Chrome. Safari on iPad works, but only since the recent 16.x upgrade.
This looks like a weird browser vs platform quirk. Does anyone happen to know a workaround or can even explain some background
EDIT after further experimentation I have a fairly minimal jsfiddle to demonstrate the problem. It seems that Firefox on Android ignores click handlers which are attached to HTML elements created while the on-screen keyboard is open. Wouldn't mind if someone could confirm in a comment that I am not alone with my FF while waiting on an answer from someone in the know.
When moving and displaying a div in a Fancybox iFrame (using javascript) in iOS devices, the iframe scrolls to top of the window and the user has to scroll back down to see the div. In non-iOS devices the div is moved into view without the iFrame scrolling up (which is what I want).
https://embed.plnkr.co/MhUHCeAaN6VVsllmovTj/
Steps to reproduce:
Navigate to the above url on an iPad using Safari
Tap "Open Fancy Box"
Scroll down and tap the "Click ME!" button
Notice the iFrame scrolls to the top.
The button creates a div, moves it to the top right of the point that was tapped, and makes it visible.
I confirmed this behavior on:
iPad (iOS 11.2.6)
Safari
Chrome
Mozilla Firefox
iPhone (iOS 11.2.6)
Safari
I confirmed this behavior does not happen on:
Windows 10
Safari (v 5.1.7)
Chrome
Mozilla Firefox
Android (7.0)
Chrome
I have tried the answer provided in this thread: fancybox2 / fancybox causes page to to jump to the top, but the iFrame still scrolls up after the button is tapped, and then locks the iFrame so you can't scroll back down.
I also tried using jQuery to scroll to the desired div (selecting with an id) after the onclick function finishes, but the iFrame doesn't move. Using "SLaks" suggestion here: How do you scroll an iframe from within using jquery?
I agree with Janis, this seems to be an issue with iOS specifically. So, I will create or upvote a corresponding bug ticket on the Apple website.
I have a site where everything is fine on desktop (FF, Chrome, IE), but when the site is opened on ipad, if a cell is edited and the keyboard popup, the page will scroll down or up automatically after the edit is completed (click outside of the edit box or click "Go").
the url is http://bambootextiles.com.au/cgi-bin/order.mobile.pl
How to avoid this annoying behaviour?
Thanks
I'm trying to hide bottom menu on active android keyboard.
The main logic what I'm thinking of is using jQuery focus and blur events to toggle displaying fixed bottom menu.
(fixed bottom menu is show or hide when occured focus / blur event)
But I need to know how to handle closing android keyboard by navigation of android software (smartphone / tablet etc) to prevent unexpected bugs.
Thanks for any input or suggestion.
You can't even tell that with native code. There's no API for being informed of the soft keyboard being opened/closed.
using dropzone.js
dropzone.on("addedfile", function(file) {
$('input#photo_title').focus();
});
is there some reason that this script does not work in Safari/iphone? It works just fine on my desktop.
Safari is up to date. i want to put the focus on the input with the mobile keyboard displayed and insert cursor displayed, instead the input is highlighted but must be clicked to bring the keyboard up/insert cursor up.
Set textbox focus in mobile safari
it is not possible to use .focus() to bring up the keyboard in IOS. This is the design and from numerous web sources apparently there is nothing you can do about it.